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

Question

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

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

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

我想使用的字体系列都是从 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

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

/* 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