如何更改里面的字体样式<md-button>
[英]How can I change the font style inside <md-button>
问题描述
I'm using AngularJS and Material Design and one thing that is bothering me is that I can't reproduce exactly the style that is used on google's oficial website for the button tags. 
我正在使用AngularJS和Material Design，令我困扰的一件事是，我无法完全重现Google官方网站上用于按钮标签的样式。 Material Deisgn Button Demo 材质设计按钮演示
When I use a button like this: 当我使用这样的按钮时：
<md-button class="md-raised md-primary">Start</md-button>
<md-button class="md-raised md-primary"><label>Start</label></md-button>
I get something like this: 我得到这样的东西：
and I was expecting to have something like this: 我期待有这样的事情：
which is kinda the same code that I wrote according to the source code provided on their website 这有点像我根据他们网站上提供的源代码编写的代码
<md-button class="md-raised md-primary">Primary</md-button>
I have tried using <b></b> tags instead of the label but the result is similar, some letters doesn't fit very well... Is there something I am missing to fix this font issue? 我尝试使用<b></b>标签而不是标签，但是结果相似，有些字母不太适合...我缺少一些可解决此字体问题的东西吗？
Edit: Example of one of my codes. 编辑：我的代码之一的示例。
(function() { angular .module("demoApp", [ "ngMaterial", "app.config", "app.controller" ]); })();
.md-button { min-width: 10em; }
<!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>
3 个解决方案
解决方案1
2 2016-01-16 17:24:23
I had this problem, it was because I (stupidly) forgot to include the 'Roboto' font. 我遇到了这个问题，这是因为我（愚蠢地）忘记了包含“ 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'>
You need to include something like this on the page, probably only need the 500 for the bold buttons. 您需要在页面上包含类似的内容，粗体按钮可能只需要500。
解决方案2
1 已采纳 2015-03-17 16:21:11
On the demo page you have linked to, it also has some styling added onto the page outside of an external stylesheet. 在您链接到的演示页面上，它还在外部样式表之外的页面上添加了一些样式。
This style reads: 此样式显示为：
.buttondemoBasicUsage section .md-button:not(.md-fab) {
min-width: 10em;
}
As you can see it adds a min-width to the buttons as long as they aren't .md-fab . 如您所见，只要按钮不是.md-fab它就会为按钮添加一个最小宽度。
Ultimately, you just need to add something to your CSS to set a min-width to the button elements. 最终，您只需要向CSS添加一些内容即可为按钮元素设置min-width 。
Something basic like this: 像这样的基本内容：
.md-button {
min-width: 10em;
font-weight: 500;
}
解决方案3
1 2015-03-17 16:27:13
It depends where you want to use. 这取决于您要使用的位置。 If you using in any list item then 如果您在任何列表项中使用
<md-button layout-fill>Post Requirement</md-button>
or you can use 或者你可以使用
<md-button style="width:200px;">Post Requirement</md-button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.