Google Webfonts和反走样

Question

我喜欢在我的商业作品上使用Google Webfonts，但它们呈现得有点参差不齐，尽管在Google提供的预览中，它们呈现得非常平滑。

看看这个：http://www.google.com/fonts/specimen/Oxygen

最大的预览看起来非常漂亮和平滑，但当我将它导入页面并使用它时，它的边缘似乎扭曲了，非常参差不齐。Google是否使用了额外的库来实现这种抗锯齿功能，或者是我做错了什么？

Answer 1

如果您从系统(windows/fonts文件夹)卸载该字体，您应该能够看到它的流畅。来克服这个问题。不要使用@import或来自google的直接链接。而是从www.fontsquirrel.com (整个网络字体工具包)下载该包，并在css中使用@ font -face来获得平滑的字体。

Answer 2

我不知道完整的技术细节，但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: on Google forums Codepen上的

希望我能帮上忙。:)

Answer 3

根据以下情况，字体呈现方式会有所不同：

• Screen/Monitor resolution
• Browser
• Operating System
• 使用的大小和提示

基于你的字体在Chrome和Firefox中看起来更差的事实，你唯一能做的就是尝试让这些浏览器更好地呈现它们。如果不看你的代码，我唯一能推荐的是：

• 确保您使用的是像样的重置css (如下所示: things.
• Assuring将font-weight: normal;添加到字体以查看是否有所不同；有时浏览器和框架尝试向字体添加假粗体您使用的是实际版本的字体，而不仅仅是应用CSS样式。
• 如果所有其他方法都失败，则尝试将字体大小调高/调小一点，并查看字体在这些大小下是否更好。

希望这能有所帮助！