2013-04-18 67 views
6

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

检查了这一点: http://www.google.com/fonts/specimen/Oxygen

最大的预览看起来非常漂亮和流畅,但是当我将其导入我的网页上,并使用它,它似乎扭曲的边缘,非常参差不齐。谷歌是否使用额外的库来实现这种反锯齿或者我是否做错了什么?

+0

需要一些代码来告诉什么是错的....! –

+0

你在你的网站上使用哪种字体大小的字体? –

+0

例子?你还使用什么操作系统,浏览器和屏幕? 所有这些因素都有助于字体渲染。 – Stuart

回答

4

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

2

字体渲染不同的基础上:

  • 屏幕/显示器分辨率
  • 浏览器
  • 操作系统
  • 使用的大小和基于这样的事实暗示

你的字体在Chrome和Firefox中,看起来更糟糕的是,您可以尝试让这些浏览器更好地呈现它们。没有看到你的代码的唯一的东西,我可以建议是:

  • 确保您使用的是体面的复位CSS(是这样的:http://meyerweb.com/eric/tools/css/reset/)。

  • 尝试将font-weight: normal;添加到字体以查看是否有所作为;有时浏览器和框架尝试添加一个虚假的大胆事物。

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

  • 如果一切都失败了,那么尝试将字体大小向上/向下颠倒一点点,看看字体是否对这些尺寸有更好的提示。

希望这有助于!

+0

'font-weight:normal;'在使用自定义.woff字体的Chrome 31测试版中,我的情况有了很大的不同。谢谢! –

1

我并不了解完整的技术细节,但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修复程序,但我找不到任何有关这方面的信息)。

进一步阅读:

希望我能帮上忙。 :)