twitter-bootstrap 谷歌字体不适用于引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21678458/
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
Google font not working with bootstrap
提问by user2820
I'm trying to use Google Font on a page. In my html I used:
我正在尝试在页面上使用 Google 字体。在我的 html 中，我使用了：
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
And in my CSS:
在我的 CSS 中：
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
Still whenI use "Open Sans" with the font-family attribute it stays on Arial.
仍然当我使用带有 font-family 属性的“Open Sans”时，它仍然使用 Arial。
body
{
background-color: #F1F1F2;
font-family: "Open Sans", Arial;
}
回答by Ahmed Wild
Using google font on any webpage is very easy and you can load the fonts asynchronously.
在任何网页上使用 google 字体都非常简单，您可以异步加载字体。
If you don't use the direct code that Google font delivers and you simply load the following url:
如果你不使用谷歌字体提供的直接代码，你只需加载以下网址：
You'd be represented the source code (CSS).
您将获得源代码 (CSS)。
Now, copy and paste the displayed code in the CSS source of your website.
现在，将显示的代码复制并粘贴到您网站的 CSS 源中。
You can then use your selected google font(s) on your webpages using the following:
然后，您可以使用以下方法在您的网页上使用您选择的谷歌字体：
body
{
background-color: #F1F1F2;
font-family: 'Open Sans', Arial;
}
That's enough and it will work.
这已经足够了，它会起作用。
回答by DrewC
I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:
我有一种预感，您的引导程序是在您的 Google 字体的 CSS 之后加载的。找到要导入此 CSS 的点：
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap-sprockets";
@import "bootstrap";
Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.
然后在此之后添加您的 Google 代码，以确保它不会被引导程序覆盖。
Good Luck!
祝你好运！
回答by Magesh Kumaar
First of all, you dont need to do it twice! any one kind of FONT ASSOCIATIONis enough !!
首先，你不需要做两次！任何一种字体关联就足够了！！
Warning that overuse of @importmay cause a overhead!
警告过度使用@import可能会导致开销！
Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Bootstrap（如果你使用过它）通常用 -> 覆盖字体 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
Working Demo -> Click here
工作演示 ->点击这里
Note: I have added the font as external resources. It seems to be working properly !
注意：我已将字体添加为外部资源。它似乎工作正常！
回答by Salah Ben Bouzid
just do !importantafter the font style you want to use
只需!important在您要使用的字体样式之后执行
