Windows 上 Chrome 和 Firefox 中的锯齿状和不连贯的 Google 网络字体答案

【问题标题】：Jagged and choppy Google webfonts in Chrome and Firefox on WindowsWindows 上 Chrome 和 Firefox 中的锯齿状和不连贯的 Google 网络字体
【发布时间】：2014-06-01 19:02:48
【问题描述】：

我正在使用 google webfonts，并且遇到了 FF 和 chrome 中呈现锯齿状和不连贯字体的问题（IE11 可以更好地呈现它们）。

示例可以在这里找到：http://jsfiddle.net/PNYfR/

<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Exo:300,400,700&subset=latin">
<p style="font-family: 'Exo', serif; font-weight: 400; font-style:normal; font-size:31px; color:white; background-color: #0085B2; line-heigth:1.42857; padding:100px">
Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897
</p>

我已阅读相关问题，但其中任何一个都没有为快速项目提供简单的解决方案：

更复杂的是，我们的设计师使用的是 Mac，它可以正确呈现字体。

问题：

是否有呈现正常的 google webfonts 列表？
或者有没有关于如何正确渲染字体的快速分步解决方案？
最后，是否有其他免费的 webfont 提供程序可以提供字体服务？

【问题讨论】：

CSS3: Webfont Smoothing and Antialiasing in Firefox and Opera的可能重复
重复谈论 OSX，我在 Windows 上遇到问题
解决这个问题的好方法是在本地托管你的字体，我推荐 google-webfonts-helper 来帮助你google-webfonts-helper.herokuapp.com

标签： html css fonts google-font-api

【解决方案1】：

这些是字体平滑的默认值（谷歌字体也是如此）我使用它似乎可以解决问题。希望这会有所帮助

*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow:none;
text-rendering: optimizeLegibility;
}

【讨论】：

在 jsfiddle 中尝试过，但没有明显改善
字体平滑的最终代码如下* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; text-shadow:none; }

【解决方案2】：

我发现下载我想使用的字体，使用字体松鼠（网络应用程序，谷歌它）将它们转换为 .svg 并将它们托管在网络服务器上似乎可以解决问题。在代码中，将 .svg 字体链接放在其他链接上方，Chrome 将/应该首先抓取它。

【讨论】：

这是我过去成功使用的方法。更多详情lee.greens.io/blog/2014/01/13/windows-chrome

【解决方案3】：

多年来的已知问题（2010 年首次提及）。开发人员承诺可能会在今年推出修复程序。问题（据我所知）是在沙箱中启用 directwrite（用于字体平滑）。

或在这里：https://code.google.com/p/chromium/issues/detail?id=331115

编辑：使用 SVG 字体对某人有帮助，但 SVG 对我来说太模糊了（与 Firefox 中的抗锯齿 woff 相比）。

【讨论】：

【解决方案4】：

将 font-weight 指定为 400 完全为我解决了这个问题。我认为最初是 700，至少对于 h2 和 h1 而言...

h2 {
font-family: 'Lobster', cursive;
font-size: 23px;
color:#fff;
font-weight: 400;
}

Firefox 仍然获胜，但不再是锯齿状了

【讨论】：

是的，问题出在font-weight。当我以@import url(http://fonts.googleapis.com/css?family=Open+Sans); 格式提供LESS 导入时，似乎font-weight: bold; 无法正常工作，我不得不改用font-weight: 400。

【解决方案5】：

只需重置 Chrome 中的所有标志。在 URL 地址栏中输入 chrome://flags，然后单击将所有标志重置为默认按钮。那应该在设置页面的右侧。它对我有用。如果它不适合您，您可以尝试启用计算机的 Aero 视觉设置（仅在禁用时）然后重置标志。如果解决了，您可以关闭航空视觉效果。

要访问 Win7 中的航空视觉设置，请转到我的电脑属性 > 高级系统设置 > 系统属性 > 高级选项卡 > 性能（设置）。从那里，将当前设置切换回“调整以获得最佳外观”（它应该选中它下面的所有框）。重置所有标志并且字体恢复正常后，您可以选择将其切换回调整以获得最佳性能。这基本上取消了所有视觉选项。

谢谢，

董

【讨论】：