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

【问题标题】：'Lato' font rendering odd in safari, not in chrome, or firefox'Lato' 字体在 safari 中呈现奇怪，而不是在 chrome 或 firefox 中
【发布时间】：2013-03-03 01:54:10
【问题描述】：

我使用的是来自谷歌网络字体的“Lato”字体，它在除 safari 之外的所有浏览器上都能正常显示。

我在font-weight:100;使用它

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

我也为这个问题做了一个 js fiddle - http://jsfiddle.net/qLHuc/1/

火狐

铬

野生动物园

【问题讨论】：

100 非常轻。您确定 Safari 不是唯一正确渲染它的吗？ 300 在 Chrome 和 Firefox 上看起来有什么不同吗？
是的，通常我会使用 100 个文本，但它是一个 24px 的子标题，所以它不会真正淡入背景。以上图片为 1:1 比例。我在 300 中尝试过，在 safari 中，300 看起来就像所有其他浏览器中的 100 一样。在 chrome 和 firefox 300 中看起来更厚
为我们制作一个 jsfiddle。
另外 - 你有 -webkit-font-smoothing: antialiased 应用于元素吗？
@ChrisHerbert - 我试过了，但似乎没有帮助，我也做了 jsfiddle，请参阅上面的修正问题，问候

标签： css fonts cross-browser text-rendering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

-webkit-font-smoothing：抗锯齿；

【讨论】：

【解决方案3】：

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

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

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

【讨论】：