Google Webfonts和Anti-aliasing

时间:2013-04-18 11:20:56

标签: html css fonts webfonts

我喜欢在我的商业作品中使用Google Webfonts,但是它们呈现有点过于锯齿状,但在Google提供的预览中,它们呈现得非常流畅。

检查一下: http://www.google.com/fonts/specimen/Oxygen

最大的预览看起来非常漂亮和流畅但是当我在我的页面上导入并使用它时,它看起来在边缘上变形,非常锯齿状。谷歌是否使用额外的库来实现这种抗锯齿,还是我做错了什么?

3 个答案:

答案 0 :(得分:5)

如果从系统中卸载字体(windows / fonts文件夹),您应该能够顺利地看到它。 为了克服这一点。不要使用谷歌的@import或直接链接。 而是从www.fontsquirrel.com(整个网络字体工具包)下载软件包,并在你的css中使用@ font-face来获得流畅的字体。

答案 1 :(得分:2)

根据以下内容呈现不同的字体:

  • 屏幕/显示器分辨率
  • 浏览器
  • 操作系统
  • 使用和提示的大小

基于您的字体在Chrome和Firefox中看起来更糟的事实,您可以尝试让这些浏览器更好地渲染它们。没有看到你的代码我唯一能推荐的是:

  • 确保使用正确的重置css(类似这样的内容:http://meyerweb.com/eric/tools/css/reset/)。

  • 尝试将font-weight: normal;添加到字体中,看看这是否有所不同;有时浏览器和框架会尝试在事物中添加假的粗体。

  • 确保您使用的是字体的实际版本而不只是应用CSS样式。

  • 如果所有其他方法都失败了,请尝试向上/向下调整字体大小一小部分,看看这些字体的字体是否更好。

希望这有帮助!

答案 2 :(得分: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修复,但我我找不到任何相关的东西。)

进一步阅读:

希望我能提供帮助。 :)