如何让 Open Sans Light 在 Chrome 中工作？答案

【问题标题】：How to make Open Sans Light to work in Chrome?如何让 Open Sans Light 在 Chrome 中工作？
【发布时间】：2016-05-22 07:13:12
【问题描述】：

这是一个如何使用来自 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>

更新：

正如this question 所暗示的，问题是由于与本地安装的字体冲突造成的。事实上，观察 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 上进行这项工作（适用于任何用户）？为什么其他浏览器会忽略本地字体处理它？

【问题讨论】：

它对我有用：jsfiddle.net/70axnLve - Google Chrome：48.0.2564.109 m
@sebastianbrosch 你的小提琴没有加载字体，这里是 fiddle 加载字体
@dippas - 我现在在检查时看到了错误，但同样你的小提琴也在工作！
@dippas 感谢您的提琴，这正是所描述的问题和行为：它适用于 FF，但不适用于 Chrome，至少在我看来。
@Niccolò 在我的小提琴中为我工作，你在本地安装了这个字体吗？

标签： css google-chrome google-font-api

【解决方案1】：

为我解决此问题的一个简单解决方法是从 Google 嵌入代码中复制 CSS 源代码，将其放入您自己的 CSS 中，然后简单地删除本地（...）源代码。

像这样：

@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）中有效。

【讨论】：