我创建了一个网站,该网站使用从 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">
最佳答案
您可以在自定义 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;
}
关于css - Bootstrap 3.3.6 通过 MAXCDN 使用 custom.css 自定义字体系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35652340/