使用Bootstrap如何呈现Open Sans Google Web字体？

Question

我正在尝试在Bootstrap中使用Google Web字体Open Sans。

我正在使用以下代码加载字体：

我有一个在Bootstrap之后加载的特定于网站的CSS文件site-specific.css。我已经尝试过：

.body { font-family: 'Open Sans', sans-serif;}

并且：

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
font-family: 'Open Sans', sans-serif;
}

但是无论我使用什么类选择器，字体都不会显示，并且会继承Bootstrap的字体。 我不确定如何调试此问题。

- David Watson

---

为什么不自定义Bootstrap？ - SLaks

Answer 1

如果你没有修改Bootstrap的核心文件，我建议你使用它们的“自定义”功能来简化操作。在将字体名称添加到其中后重新下载文件，并用新的文件替换现有的Bootstrap文件。你可以在这里进行自定义：http://getbootstrap.com/customize/。这样做至少可以确保你不会错过什么...请避免像上面建议的那样使用!important（除非你真的需要）。希望能对你有所帮助！

- Michael Giovanni Pumo

---

在下载之前，请在自定义页面的@sansFontFamily框中插入“Open Sans”，并不要忘记在文档头中包含来自Google Webfonts API的链接。 - Pevara

我正在使用来自Bootstrap CDN的Bootstrap。不过我会尝试这种方法。我只是不明白为什么覆盖继承的字体样式似乎如此困难。 - David Watson

这对你有帮助吗？你考虑过接受一个正确的答案吗？这将有助于未来遇到类似问题的其他人。谢谢。 - Michael Giovanni Pumo

Answer 2

使用CSS !important

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
font-family: 'Open Sans', sans-serif !important; <-------- Here
}

- Mr. Alien

---

!important 对渲染输出没有任何影响。 - David Watson