Question

我正在使用google webfonts并且遇到了FF和Chrome中锯齿状和波涛汹涌的字体渲染问题（IE11使它们更好）。

<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提供商，它可以提供字体吗？

Answer 1

我发现下载我想要使用的字体，使用font squirrel（web应用程序，google）将它们转换为.svg并将它们托管在Web服务器上似乎解决了这个问题。在代码中，将.svg字体链接放在其他链接之上，Chrome将首先抓取它。

Answer 2

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

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

Answer 3

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

更多信息 http://www.reddit.com/r/web_design/comments/23cuif/yet_another_chrome_webfont_aliasing_post_why_is/cgvs5j2

或此处：https://code.google.com/p/chromium/issues/detail?id=331115

编辑：使用SVG字体可以为某些人提供帮助，但SVG对我来说过于模糊（与Firefox中的抗锯齿woff相比）。

Answer 4

将font-weight指定为400可以完全解决问题。我认为它至少是700，至少对于h2和h1 ......

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

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

Answer 5

只需重置Chrome中的所有标记即可。在URL地址栏中键入chrome：// flags，然后单击Reset All Flags to default按钮。这应该在设置页面的右侧。它对我有用。如果不适合您，您可以尝试启用计算机的Aero可视设置（仅在禁用时），然后重置标志。如果已解决，您可以关闭航空视觉效果。

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

谢谢，

冬

Windows中的Chrome和Firefox中的锯齿状和不稳定的Google网络字体

5 个答案: