2018年更新

Question

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

The site can be found here

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

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

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

到

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

Chrome在没有引号的情况下完美运行，但Safari却没有。

Answer 3

由于一些奇怪的原因，我在谷歌的某些网络字体上遇到过这种情况......当发生这种情况时，我通常会将它们带到我的服务器和/或转换它们在fontsquirrel .... Safari应该能够使用 TTF文件，无论是什么版本：

Nunito TTF ver

Answer 4

如果你在css中使用@import代码，就像这样

将其删除并使用 head 标记

中的链接

Answer 5

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，这是一种“常规”加权字体。某些浏览器可以使用此字体并将其变成粗体，并且看起来还不错。这称为"faux bold"。但是，它看起来永远不会像手工制作的粗体字体那样好。在某些浏览器（尤其是移动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;
}

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

Answer 6

我有一个案例，Google Webfont（Londrina）没有出现在Safari（Windows）中，因为我使用了text-rendering: optimizeLegibility;。删除后，没关系。

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

Answer 7

对我来说，这发生在 2021 年。必须将 URL 中的与号切换为 &。

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;700&display=swap" rel="stylesheet">

Answer 8

即使这是一个老问题，我想我会添加我的解决方案（我在其他地方找到）以帮助其他人。

在CSS中声明字体时，请在末尾添加“！important”。它解决了我的问题。

body { font: {  
    family: $arvo, sans-serif !important;
    size: 18px;
}

Google字体无法在Safari上运行

8 个答案:

2018年更新