在Windows上，Chrome和Firefox浏览器中的Google Web字体出现了不平滑和锯齿状的情况。

Question

我正在使用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>

我阅读了相关的问题，但是它们中没有一个为快速项目提供简单解决方案：

• Google网络字体在Windows上的Chrome浏览器中渲染得很糟糕
• 完美渲染的Web字体解决方案
• Google网络字体和Windows XP

更让事情变得复杂的是，我们的设计师使用的是Mac，它能够正确地渲染字体。

问题：

• 有没有一份Google网络字体列表，能够正常渲染？
• 或者是否有一种快速逐步解决方案，能够正确渲染字体？
• 最后，是否有另一种提供免费网络字体的替代服务商，可以正常提供字体呢？

- zeldi

---

可能是重复的问题：CSS3：Firefox和Opera中Web字体平滑和抗锯齿 - Sinister Beard

重复讨论了OSX，我在Windows上遇到了问题。 - zeldi

解决这个问题的好方法是将字体托管到本地，我推荐使用google-webfonts-helper来帮助你https://google-webfonts-helper.herokuapp.com。 - Vael Victus

Answer 1

我发现下载我想要使用的字体，使用 Font Squirrel（网络应用程序，谷歌搜索）将它们转换为 .svg 格式并托管到 Web 服务器上似乎可以解决这个问题。在代码中，将 .svg 字体链接放在其他链接之前，Chrome 将/应该会首先获取该链接。

- user1752708

---

这是我过去成功使用的方法。更多细节请访问http://lee.greens.io/blog/2014/01/13/windows-chrome/。 - LeeXGreen

Answer 2

这些是我使用的字体平滑的默认设置（包括Google字体），它们似乎很有效。希望这能帮到你。

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

- Daniel Broughan

---

在 jsfiddle 上尝试过，但没有明显的改善。 - zeldi

我的最终字体平滑代码如下：* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; text-rendering: optimizeLegibility; text-shadow:none; } - Greg K.

Answer 3

将字体粗细指定为400完全解决了我的问题。我认为它最初是700，至少对于h2和h1...

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

Firefox 仍然是赢家，但它不再那么锯齿了

- Peter Pagh

---

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

Answer 4

只需在Chrome中重置所有标志即可。在URL地址栏中键入chrome://flags，然后单击“重置所有标志为默认值”按钮。该按钮应位于设置页面的右侧。这对我有用。如果对您无效，则可以尝试启用计算机的Aero视觉设置（仅在禁用时），然后重置标志。如果解决了问题，您可以关闭aero视觉效果。

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

谢谢，

Dong

- Wookie

Answer 5

已知问题多年（最早于2010年提到）。开发人员承诺可能在今年引入修复程序。问题（据我所知）在于启用沙盒内的直接写入（用于字体平滑处理）。

更多信息请参见此处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字体可以有所帮助，但与Firefox中抗锯齿woff相比，SVG太模糊了。

- catt