twitter-bootstrap 使用引导程序呈现开放的 sans google web 字体?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13825401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:53:50  来源:igfitidea点击:

Rendering open sans google web fonts with bootstrap?

csstwitter-bootstrapgoogle-webfonts

提问by David Watson

I'm trying to use google web fonts open sans with bootstrap.

我正在尝试使用 google web fonts open sans with bootstrap。

I'm loading the fonts with:

我正在加载字体:

I have a site-specific.css that loads after bootstrap. I've tried:

我有一个在引导后加载的特定于站点的.css。我试过了:

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

and also:

并且:

.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;
}

But it seems that no matter what class selector I use, the fonts don't render and the bootstrap fonts are inherited instead. I'm not sure how to debug this.

但似乎无论我使用什么类选择器,字体都不会呈现,而是继承自举字体。我不知道如何调试这个。

回答by Michael Giovanni Pumo

Provided you haven't altered the core files of Bootstrap, I would make this easier on yourself and use their "customise" feature. Re-download it after placing your font names in and replace your existing bootstrap files with the new ones.

如果您没有更改 Bootstrap 的核心文件,我会让您自己更轻松并使用他们的“自定义”功能。放入字体名称后重新下载,并用新的引导文件替换现有的引导文件。

You can customise it here:

您可以在此处自定义:

http://getbootstrap.com/customize/

http://getbootstrap.com/customize/

Doing this will at least ensure that you don't miss something...and please, avoid using !importantas suggested above (unless you reallyneed to). Hope that helps?

这样做至少可以确保您不会错过任何东西……并且请避免!important按照上面的建议使用(除非您确实需要)。希望有帮助吗?

回答by Mr. Alien

Use CSS !important

使用 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
}