如何更改里面的字體樣式<md-button>
[英]How can I change the font style inside <md-button>
問題描述
我正在使用AngularJS和Material Design，令我困擾的一件事是，我無法完全重現Google官方網站上用於按鈕標簽的樣式。 材質設計按鈕演示
當我使用這樣的按鈕時：
<md-button class="md-raised md-primary">Start</md-button>
<md-button class="md-raised md-primary"><label>Start</label></md-button>
我得到這樣的東西：
我期待有這樣的事情：
這有點像我根據他們網站上提供的源代碼編寫的代碼
<md-button class="md-raised md-primary">Primary</md-button>
我嘗試使用<b></b>標簽而不是標簽，但是結果相似，有些字母不太適合...我缺少一些可解決此字體問題的東西嗎？
編輯：我的代碼之一的示例。
(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
我遇到了這個問題，這是因為我（愚蠢地）忘記了包含“ 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。
解決方案2
1 已采納 2015-03-17 16:21:11
在您鏈接到的演示頁面上，它還在外部樣式表之外的頁面上添加了一些樣式。
此樣式顯示為：
.buttondemoBasicUsage section .md-button:not(.md-fab) {
min-width: 10em;
}
如您所見，只要按鈕不是.md-fab它就會為按鈕添加一個最小寬度。
最終，您只需要向CSS添加一些內容即可為按鈕元素設置min-width 。
像這樣的基本內容：
.md-button {
min-width: 10em;
font-weight: 500;
}
解決方案3
1 2015-03-17 16:27:13
這取決於您要使用的位置。 如果您在任何列表項中使用
<md-button layout-fill>Post Requirement</md-button>
或者你可以使用
<md-button style="width:200px;">Post Requirement</md-button>
md按鈕內的可點擊圖標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.