CSS 谷歌字体在 Safari 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24061808/
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 on Safari
提问by Juicy
I'm working on making my site look the same under Safari and Chrome. In Chrome it looks exactly how I want it to. The major problem is that Google Font doesn't seem to be loading under Safari. Because I'm using the exact code given on the Google Font site, I can't understand why Safari won't fetch it. Is it just incompatible with Safari and I have to rely on a fallback font?
我正在努力使我的网站在 Safari 和 Chrome 下看起来相同。在 Chrome 中，它看起来正是我想要的。主要问题是 Google Font 似乎无法在 Safari 下加载。因为我使用的是 Google Font 站点上给出的确切代码，所以我不明白为什么 Safari 无法获取它。它是否只是与 Safari 不兼容，而我必须依赖后备字体？
采纳答案by Riskbreaker
For some odd reason I have experience this on some web fonts from Google...when this has happened I usually get them to my server and/or convert themin fontsquirrel....Safari should be able to take TTF Filesno matter what ver:
对于一些奇怪的原因，我对谷歌从一些网站的字体遇到此...当发生这种情况，我通常让他们到我的服务器和/或转换他们在fontsquirrel .... Safari浏览器应该能够采取TTF文件不管是什么版本：
回答by Robert
Your CSS should not only contain
你的 CSS 不仅应该包含
font-family: 'Source Sans Pro', sans-serif;
it should also have values for FONT-STYLE and FONT-WEIGHT:
它还应该具有 FONT-STYLE 和 FONT-WEIGHT 的值：
font-family: 'Source Sans Pro', sans-serif; font-weight:900; font-style:italic;
in case you use a font that contains those values like for example: https://fonts.googleapis.com/css?family=Source+Sans+Pro:900italic
如果您使用包含这些值的字体，例如：https: //fonts.googleapis.com/css?family=Source+Sans+Pro: 900italic
回答by Hakan
If you are using an @import code in the css like this
如果您像这样在 css 中使用 @import 代码
delete it and use linkin headtag
删除它并在head标签中使用链接
回答by oivvio
A 2018 update
2018 年更新
I've had this problem in the past and I've had to resort to the option of providing more font file formats. I was a bit surprised to encounter it again in 2018. But it turned out that my problem was not with file-formats but simply with not requesting and specifying the correct font weights.
我过去遇到过这个问题，我不得不求助于提供更多字体文件格式的选项。我在 2018 年再次遇到它时有点惊讶。但事实证明，我的问题不在于文件格式，而在于没有请求和指定正确的字体粗细。
If we don't customize the URL for requesting this font from Google our link tag will look like this:
如果我们不自定义从 Google 请求此字体的 URL，我们的链接标签将如下所示：
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
Let's have a look at what is inside that requested URL. It's going to contain several font-face rules looking something like this:
让我们看看请求的 URL 里面有什么。它将包含几个看起来像这样的字体规则：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Notice the font-weightattribute. It's specified as 400 which is a "normal" weighted font. Some browsers are able to take this font and turn it into a bold and still look half way decent. This is called "faux bold". It's never going to look as good as a hand crafted bold font though. And on some browsers, notably mobile Safari, it's going to fall down flat and look horrible.
注意font-weight属性。它被指定为 400，这是一种“正常”加权字体。一些浏览器能够采用这种字体并将其变成粗体，并且看起来仍然不错。这被称为“假粗体”。不过，它永远不会像手工制作的粗体字体一样好。而在某些浏览器上，尤其是移动版 Safari，它会掉下来，看起来很糟糕。
The remedy is to request and specify the actual font weight variants you want to use. In my case it looks like this:
补救方法是请求并指定要使用的实际字体粗细变体。就我而言，它看起来像这样：
This will produce the following link tag:
这将产生以下链接标签：
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext" rel="stylesheet">
If you look at the contents of that URL you'll find that there are now entries for font-face rules font-weight: 700in there.
如果您查看该 URL 的内容，您会发现其中现在有字体规则的条目font-weight: 700。
Now if I want to use the bold version of this font for my h1 tags I'll use the following CSS.
现在，如果我想对我的 h1 标签使用这种字体的粗体版本，我将使用以下 CSS。
h1 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
}
Most browsers will automatically set h1 as font-weight: bold. If I want to take advantage of that default setting I have to provide my own font-face rules. I can do this by simply duplicating the font-face rules supplied by Google, exchaging font-face: 700for font-face: boldand putting those changed rules in my own css.
大多数浏览器会自动将 h1 设置为font-weight: bold. 如果我想利用该默认设置，我必须提供我自己的字体规则。我可以简单地复制由谷歌提供font-face规则，exchaging做到这一点font-face: 700的font-face: bold，并把这些改变规则，我自己的CSS。
So this rule:
所以这个规则：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Would become this:
会变成这样：
/* latin */
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: bold;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v11/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Now an h1 tags with font-family: 'Source Sans Pro'will be using the correct font variant.
If you want a more in depth read check out this 2012 A List Apart article.
现在 h1 标签font-family: 'Source Sans Pro'将使用正确的字体变体。如果您想更深入地阅读，请查看这篇 2012 A List Apart 文章。
回答by shukshin.ivan
My case was that I used font name without quotes. So just change
我的情况是我使用了不带引号的字体名称。所以只要改变
body{
font-family: roboto, Arial, sans-serif;
}
to
到
body{
font-family: 'roboto', Arial, sans-serif;
}
Chrome works perfectly without quotes, but Safari doesn't.
Chrome 无需引号即可完美运行，但 Safari 则不然。
回答by user2622348
I had a case where a Google Webfont (Londrina) did not show up in Safari (for Windows), because I used text-rendering: optimizeLegibility;. After removing that, it was fine.
我遇到过一个 Google Webfont (Londrina) 没有出现在 Safari（对于 Windows）中的情况，因为我使用了text-rendering: optimizeLegibility;. 去掉之后就好了。
Example: http://codepen.io/julia-r/pen/gagbdy
回答by smallcolin
Even though this is an old question I thought I would add my solution (that i found elsewhere) so as to help others.
尽管这是一个老问题，但我认为我会添加我的解决方案（我在别处找到的）以帮助他人。
When you declare your fonts in your CSS, add an "!important" at the end. It cleared up my problem.
当您在 CSS 中声明字体时，请在末尾添加“!important”。它解决了我的问题。
body { font: {
family: $arvo, sans-serif !important;
size: 18px;
}
