2

我创建了一个使用从 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">
4

1 回答 1

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">

然后，您可以font-family:..在custom.css.

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

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

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

引导层示例

于 2016-02-26T13:28:32.967 回答