Chrome 忽略字体粗细

Question

我创建了一个 小提琴，试图使用字体粗细为 300 的 Open Sans 字体：

HTML

 <span class="demo">example</span>

CSS

 .demo {
  font-weight: 400 !important;
  font-family: 'Open Sans' !important;
  font-style: normal;
  font-variant: normal;
}

我使用谷歌字体来定义 CSS

在 font-weight: 300 (light) 和 font-weight: 400 (normal) 渲染时，我可以看到 Firefox (Ubuntu 13.10) 的不同，但在 Chrome (版本 33.0.1750.117 ) 中没有，一切看起来都呈现在字体粗细：400。我做错了什么还是 Chrome 中有错误？有任何已知的解决方法吗？

更新：

chrome 肯定有问题我在 Chrome 的 2 个不同窗口中打开了同一页面的两个实例。一种是渲染字体正常（300 权重对应于 light 变体），一种不是（300 权重与 Normal 变体相同）。有什么线索吗？我确保刷新每个选项卡中的页面，以便它们实际上是同一页面。

更新 2 ：附加屏幕截图：错误的：

更新 3 这不是 这个 的副本。在那个问题中，问题是“Arial Black”和“Arial”实际上是不同的字体。在我的例子中，Open Sans 是唯一的字体，问题是 Chrome 有时会选择不正确的重量。正如您从屏幕截图中看到的那样，即使在两个实例之间，Chrome 也与呈现的字体不一致。

原文由 vseguip 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将此添加到您的 CSS：

 * {-webkit-font-smoothing: antialiased;}

原文由 Fred K 发布，翻译遵循 CC BY-SA 3.0 许可协议