'Lato'字体在Safari中呈现奇怪，而不是在chrome或firefox中

Question

我使用谷歌网络字体中的'Lato'字体，除了safari之外，它在所有浏览器上都能正常显示。

我在font-weight:100;

中使用它

以下是不同浏览器的一些屏幕截图。知道什么可能导致它变得极薄吗？或者，如果我有一种方式可以将其设置为仅在font-weight:300;中进行Safari的渲染？

我也提出了问题的一个小问题 - http://jsfiddle.net/qLHuc/1/

FIREFOX

CHROME

SAFARI

Answer 1

我不知道为什么，但Safari正在禁用该页面上的小字体尺寸的亚像素防眩光。您可以通过应用-webkit-font-smoothing: subpixel-antialiased来解决此问题。见这里：http://jsfiddle.net/qLHuc/3/

但是，我认为你应该考虑使用更重的字体。你在Windows上测试过吗？它可能看起来非常非常轻。当启用亚像素抗锯齿时，OSX会非常频繁地渲染文本，尤其是当文本针对深色或彩色背景时。您在Safari屏幕截图中看到的内容类似于OSX上没有的人会看到的内容。

Answer 2

当我尝试使用font-weight：300的google字体时，我也遇到了类似的问题 - 它在除safari之外的所有浏览器中都能正常工作。

我通过添加以下css属性解决了这个问题。

  

-webkit-font-smoothing：antialiased;

Answer 3

我遇到了一个看似完全相同的类似问题。我在使用这个谷歌字体链接时使用了CSS font-weight: lighter;：

http://fonts.googleapis.com/css?family=Lato:300,400

不知怎的，它显示为100重量！所以，我现在明确地使用font-weight:300;来获得我想要的东西。我不确定，但我相信这可能与我的系统上有字体有关，谷歌建议我的电脑在再次下载之前使用系统字体...没有这个问题就不会想出来和A，谢谢！