Question

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

我的目的是通过加载custom.css来对Bootstrap进行更改（来自我的研究我相信这是一些常用和接受的自定义引导站点的方法之一 ）。

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

我想使用的font-family是从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">

然后，您可以在font-family:..中随意应用custom.css。

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

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

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

Bootply example

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

1 个答案: