Question

我使用的是AngularJS和Material Design，让我困扰的一件事是，我无法准确再现谷歌网站上用于按钮标签的风格。 Material Deisgn Button Demo

当我使用这样的按钮时：

<md-button class="md-raised md-primary">Start</md-button>
<md-button class="md-raised md-primary"><label>Start</label></md-button>

我得到这样的东西：

Button IMG

我希望有这样的东西：

enter image description here

这与我根据其网站上提供的源代码编写的代码相同

<md-button class="md-raised md-primary">Primary</md-button>

我尝试使用<b></b>标签代替标签，但结果相似，有些字母不太合适......我是否缺少修复此字体问题的内容？

编辑：我的一个代码示例。

＆＃13;

(function() {
  angular
    .module("demoApp", [
      "ngMaterial",
      "app.config",
      "app.controller"
    ]);

})();

＆＃13;

.md-button {
  min-width: 10em;
}

＆＃13;

<!doctype HTML>
<html>

<head>
  <link rel="stylesheet" href="../bootstrap/bootstrap.css">
  <link rel="stylesheet" href="../material/angular-material.css">
  <link rel="stylesheet" href="style/style.css">
</head>

<body ng-app="demoApp">
  <div layout="column" style="padding-bottom: 20px;">
    <md-toolbar layout="row">
      <h1 class="Title">Ten plus ten is {{10+10}}!</h1>
    </md-toolbar>
  </div>
  <div layout="row">
    <div>
    </div>
    <div layout="column">
      <div layout="row">
        <div flex="25" flex-sm="0" flex-md="0"></div>
        <div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
          <md-toolbar class="md-primary">
            <div class="md-toolbar-tools">
              <span class="md-flex">Parameters</span>
            </div>
          </md-toolbar>
          <md-content class="md-padding">
            <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
              cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
            </p>
            <p>
              Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
            </p>

            <div>
              <div layout="column" ng-controller="ParametersController as params">
                <md-content class="md-padding">
                  <div layout layout-sm="column">
                    <md-input-container flex>
                      <label>Parameter 1</label>
                      <input ng-model="params.param1" placeholder="placehold text">
                    </md-input-container>
                    <md-input-container flex>
                      <label>Parameter 2</label>
                      <input ng-model="params.param2" placeholder="placehold text">
                    </md-input-container>
                  </div>
                  <div layout layout-sm="column">
                    <md-input-container flex>
                      <label>Parameter 3</label>
                      <input ng-model="params.param3" placeholder="placehold text">
                    </md-input-container>
                    <md-input-container flex>
                      <label>Parameter 4</label>
                      <input ng-model="params.param4" placeholder="placehold text">
                    </md-input-container>
                  </div>
                </md-content>
              </div>

              <div layout="row" layout-align="end center">
                <div></div>
                <md-button class="md-raised md-primary" ng-click="sendParameters()">Primary</md-button>
              </div>
            </div>

          </md-content>
        </div>
        <div flex="25" flex-sm="0" flex-md="0"></div>
      </div>

      <div layout="row">
        <div flex="25" flex-sm="0" flex-md="0"></div>
        <div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
          <md-toolbar class="md-primary">
            <div class="md-toolbar-tools">
              <span class="md-flex">Algorithm</span>
            </div>
          </md-toolbar>
          <md-content class="md-padding">
            <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
              cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
            </p>
            <p>
              Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
            </p>
          </md-content>
        </div>

        <div flex="25" flex-sm="0" flex-md="0"></div>
      </div>
      <div layout="row">
        <div flex="25" flex-sm="0" flex-md="0"></div>
        <div flex class="md-whiteframe-z1" layout="column" style="margin-bottom: 15px;">
          <md-toolbar class="md-accent">
            <div class="md-toolbar-tools">
              <span class="md-flex">Video</span>
            </div>
          </md-toolbar>
          <md-content class="md-padding">
            <p>Lorem ipsum dolor sit amet, ne quod novum mei. Sea omnium invenire mediocrem at, in lobortis conclusionemque nam. Ne deleniti appetere reprimique pro, inani labitur disputationi te sed. At vix sale omnesque, id pro labitur reformidans accommodare,
              cum labores honestatis eu. Nec quem lucilius in, eam praesent reformidans no. Sed laudem aliquam ne.
            </p>
            <p>
              Facete delenit argumentum cum at. Pro rebum nostrum contentiones ad. Mel exerci tritani maiorum at, mea te audire phaedrum, mel et nibh aliquam. Malis causae equidem vel eu. Noster melius vis ea, duis alterum oporteat ea sea. Per cu vide munere fierent.
            </p>

          </md-content>
        </div>
        <div flex="25" flex-sm="0" flex-md="0"></div>
      </div>
    </div>
  </div>

  <!-- Angular Material Dependencies -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>

  <script src="app.module.js"></script>
  <script src="app.config.js"></script>
  <script src="app.contoller.js"></script>
</body>

</html>

＆＃13;

Answer 1

我有这个问题，因为我（愚蠢地）忘了包含'Roboto'字体。

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

你需要在页面上包含这样的东西，粗体按钮可能只需要500.

Answer 2

在您链接的演示页面上，它还在外部样式表之外的页面上添加了一些样式。

这种风格如下：

.buttondemoBasicUsage section .md-button:not(.md-fab) {
    min-width: 10em;
}

正如您所看到的，只要它们不是.md-fab，它就会为按钮添加最小宽度。

最终，您只需要在CSS中添加一些内容，以便为按钮元素设置min-width。

像这样基本的东西：

.md-button {
    min-width: 10em;
    font-weight: 500;
}

Answer 3

这取决于您想要使用的位置。如果您在任何列表项中使用，那么

<md-button layout-fill>Post Requirement</md-button>

或者您可以使用

<md-button style="width:200px;">Post Requirement</md-button>

如何更改<md-button> </md-button>中的字体样式

3 个答案: