谷歌网络字体和抗锯齿

Question

7

我喜欢在我的商业作品中使用Google Webfonts，但它们的呈现有点太锯齿状了，尽管在Google提供的预览中，它们呈现得非常流畅。

看看这个： http://www.google.com/fonts/specimen/Oxygen 最大的预览看起来非常好，很流畅，但当我将其导入我的页面并使用时，边缘变形，非常锯齿。Google使用额外的库来实现此反走样效果，还是我做错了什么？

- ofer dofer

需要一些代码来告诉是什么出了问题....!! - Hiren Pandya

你在网站上使用哪种字体大小来显示这个字体？ - Miljan Puzović

所有这些因素都会影响字体的渲染。 - Stuart

1

好的，在IE中看起来很棒，但在Chrome和Firefox中不行。我正在使用Windows 7。 - ofer dofer

你能截图吗？ - Stuart

3个回答

3

我不清楚完整的技术细节，但Chrome可能会与其他浏览器不同地呈现字体。

您可以尝试在CSS文件中指定一个font-smoothing规则。

p {
    -webkit-font-smoothing: antialiased;
}

这个规则经常被使用。有时候，人们会将它应用到每个选择器（包括*）：

* {
    -webkit-font-smoothing: antialiased;
}

此属性的三个可能值为：

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

很抱歉，我现在无法重现平滑问题（我不知道为什么，我的电脑没有改变平滑设置，一切都非常清晰可读，可能是最近Chrome修复了这个问题，但我找不到任何相关信息）。

进一步阅读：

- 关于ClearType和Chrome：请参阅Google论坛 - -webkit-font-smoothing demo在Codepen上的演示。

希望我能帮到您。 :)

- meduz'

2

字体的呈现效果受以下因素影响:

基于你的字体在Chrome和Firefox中看起来更糟糕的事实，你可以尝试以下措施来改善它们的呈现效果。在未看到你的代码之前，我唯一能推荐的是:

希望这可以帮助你！

- Stuart

“font-weight: normal;”在我的情况下对Chrome 31 beta和自定义的.woff字体产生了相当大的影响。谢谢！ - Johan B

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mathew · Accepted Answer

如果您从系统中卸载字体（在Windows/Fonts文件夹中），则应该能够看到它的平滑效果。为了解决这个问题，请不要使用@import或直接从Google链接。相反，从www.fontsquirrel.com下载整个Web字体包，并在CSS中使用@font-face来获取平滑字体。