css - “Lato”字体在 safari 中呈现奇怪，而不是在 chrome 或 firefox 中

Question

我使用来自 google 网络字体的“Lato”字体，它在除 safari 之外的所有浏览器上都显示良好。

我在 font-weight:100;

中使用它

这里有一些不同浏览器的屏幕截图。知道是什么导致它变得非常薄吗？或者，如果有一种方法可以将其设置为在 font-weight:300; 中呈现，仅适用于 safari？

我还用 js 解决了这个问题 - http://jsfiddle.net/qLHuc/1/

火狐

Chrome

Safari

Answer 1

我不确定为什么，但 Safari 在该页面上以小字体禁用亚像素抗锯齿。您可以通过应用 -webkit-font-smoothing: subpixel-antialiased 来修复它。看这里:http://jsfiddle.net/qLHuc/3/

但是，我认为您应该考虑使用较粗的字体。你在 Windows 上测试过这个吗？它可能看起来非常非常轻。启用子像素抗锯齿后，OSX 会非常严重地渲染文本，尤其是当文本在深色或彩色背景下时。您在 Safari 屏幕截图中看到的内容与不使用 OSX 的人看到的内容相似。