如何使Open Sans Light在Chrome中生效？

Question

如何使Open Sans Light在Chrome中生效？

8

这是一个使用Google API中的Open Sans字体的简单示例。预期效果是第一行比第二行更轻（font-weight 300）。

就Windows而言，这在当前版本的FF和Edge上可以实现，但在Google Chrome上不行。这样的浏览器会显示两个段落都具有相同的正常样式，而不是对第一个段落使用轻样式。

<head>
    <meta charset="utf-8" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
    <style>

    </style>
</head>


<body>
    <p style="font-family: 'Open Sans'; font-weight: 300;">Foobar</p>
    <br>
    <p style="font-family: 'Open Sans'; font-weight: 400;">Foobar</p>
</body>

更新：

正如这个问题所述，问题是由于与本地安装的字体冲突导致的。实际上，观察从Google API调用'local'字体：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

仅仅移除本地字体并不是一个真正的解决方案，因为：

如果存在该字体，则可能是某些程序需要它。
要求网站用户删除其本地字体不是一个选项。

因此，问题依然存在：

如何在Chrome上使其工作（适用于任何用户）？为什么其他浏览器能够忽略本地字体而处理它？

- Niccolò

@sebastianbrosch 你的代码片段无法加载字体，这里有一个fiddle可以加载字体。 - dippas

@dippas - 我现在在检查中看到了错误，但是同样的你的fiddle也在工作！ - Sebastian Brosch

@dippas 感谢你提供的代码片段，它完全符合所描述的问题和行为：在 Firefox 上可以正常工作，但在 Chrome 上似乎不行。 - Niccolò

@Niccolò在我的fiddle上工作，你本地安装了这个字体吗？ - dippas

我不记得在本地安装过这个字体。可能是已经安装了，但是如何防止这种情况发生呢？为什么在Firefox上可以正常工作呢？我不能让用户检查并卸载字体，对吧？ - Niccolò

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kim Jensen · Accepted Answer

我用的一个简单的解决方法是将Google嵌入代码中的CSS源代码复制到自己的CSS中，然后简单地删除local(...)源。

就像这样：

@font-face {
   font-family: 'Open Sans Light';
   font-style: normal;
   font-weight: 300;
   src:url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}

我已经在本地安装了字体，而且这种方法似乎在Chrome（以及Firefox、IE和Edge）中有效。