Bootstrap 3.3.6 通过 MAXCDN 使用 custom.css 自定义字体系列

Question

我创建了一个网站，该网站使用从 MAXCDN 内容分发网络加载的 Bootstrap 3.3.6（供参考，代码在问题的末尾）。

我的意图是通过加载 custom.css 来对 Bootstrap 进行更改（根据我的研究，我相信这是少数常用和接受的自定义 bootstrap 站点的方法).

我的问题是如何通过 custom.css. 在整个 bootstrap 中更改字体系列

我想使用的字体系列都是 fonts.googleapis.com 提供的 Google 字体，但我认为这个问题的答案可能对任何使用 webfonts 的人都有用。

font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Slab', serif;

**Google HTML Link:** <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,700italic,500italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

**Google CSS Import:** @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,700italic,500italic,900,900italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Roboto+Slab:400,100,300,700);

来自负载部分的参考代码

<!-- Bootsrap // Load latest version from MAXCDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">    

<!-- jQuery library // Load latest version from GOOGLEAPIS  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<!-- Bootstrap JavaScript // Load latest version from MAXCDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>    

<!-- Bootstrap Font Awesome // Load latest version from MAXCDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!-- LOCAL CSS -->
<link rel="stylesheet" type="text/css" href="css/custom.css">

Answer 1

您可以在自定义的顶部使用@import CSS..

/* custom.css */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ital...

或者，更好的选择是在 custom.css..

之前将字体 LINK 添加到您的头部

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

然后您可以在 custom.css 中的任意位置应用 font-family:..。

对于整个 body，或对于特定元素..

body {
   padding-top:50px;
   font-family: 'Roboto', sans-serif;
}

h1 {
   font-family: 'Roboto Slab', serif;
}

Bootply example

Bootstrap 3.3.6 通过 MAXCDN 使用 custom.css 自定义字体系列

Bootsrap 3.3.6 via MAXCDN customise font family using custom.css

css

twitter-bootstrap

fonts

google-font-api

roboto