Google字体无法在Safari上运行

Question

我正在努力让我的网站在Safari和Chrome下看起来一样.在Chrome中,它看起来就像我想要的那样.主要问题是Google Font似乎没有在Safari下加载.因为我使用的是Google字体网站上提供的确切代码,我无法理解为什么Safari无法获取它.它是否与Safari不兼容,我必须依赖后备字体？

该网站可以在这里找到

Answer 1

你的CSS不仅应该包含

font-family: 'Source Sans Pro', sans-serif;

它还应具有FONT-STYLE和FONT-WEIGHT的值:

font-family: 'Source Sans Pro', sans-serif; font-weight:900; font-style:italic;

如果您使用包含这些值的字体,例如:https://fonts.googleapis.com/css？family = Source + Sans + Pro: 900italic

Answer 2

如果你在这样的css中使用@import代码

删除它并在头标记中使用链接

Answer 3

2018年更新

我过去曾遇到过此问题，因此不得不选择提供更多字体文件格式的选项。我在2018年再次遇到它令我有些惊讶。但是事实证明，我的问题不在于文件格式，而在于不要求和指定正确的字体粗细。

如果我们不自定义从Google请求此字体的网址，则我们的链接标记将如下所示：

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

让我们看一下所请求的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;
}

注意该font-weight属性。它指定为400，这是一种“常规”加权字体。某些浏览器可以使用此字体并将其变成粗体，并且看起来还不错。这称为“人造粗体”。但是，它看起来永远不会像手工制作的粗体字体那样好。在某些浏览器（尤其是移动Safari）上，它会掉下来并看上去很恐怖。

补救措施是请求并指定要使用的实际字体粗细变体。就我而言，它看起来像这样：

这将产生以下链接标记：

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&amp;subset=latin-ext" rel="stylesheet">

如果查看该URL的内容，则会发现其中现在存在字体规则的条目font-weight: 700。

现在，如果我想为我的h1标签使用此字体的粗体，则将使用以下CSS。

h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;
}

大多数浏览器会自动将h1设置为font-weight: bold。如果要利用该默认设置，则必须提供自己的字体规则。我可以通过简单地复制Google提供的字体规则，font-face: 700进行选择font-face: bold并将这些更改后的规则放在我自己的CSS中来做到这一点。

所以这条规则：

/* 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;
}

会变成这样：

/* 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;
}

现在，带有的h1标签font-family: 'Source Sans Pro'将使用正确的字体变体。如果您想更深入地阅读，请查看这篇2012 A List Apart文章。

Answer 4

我的情况是我使用了没有引号的字体名称.所以只需改变

body{
    font-family: roboto, Arial, sans-serif;
}

至

body{
    font-family: 'roboto', Arial, sans-serif;
}

Chrome无需引号即可完美运行,但Safari却没有.

Answer 5

由于一些奇怪的原因,我在谷歌的一些网络字体上遇到过这种情况......当发生这种情况时,我通常将它们送到我的服务器和/或将它们转换为fontsquirrel .... Safari应该能够接受TTF文件而不管是什么版本:

Nunito TTF ver

Answer 6

我遇到过一个 Google Webfont (Londrina) 没有出现在 Safari（对于 Windows）中的情况，因为我使用了text-rendering: optimizeLegibility;. 去掉之后就好了。

示例：http : //codepen.io/julia-r/pen/gagbdy