我喜欢在我的商业作品中使用Google Webfonts,但它们呈现得有点过于锯齿,但在Google提供的预览中,它们渲染得非常流畅。Google Webfonts和反锯齿
检查了这一点: http://www.google.com/fonts/specimen/Oxygen
最大的预览看起来非常漂亮和流畅,但是当我将其导入我的网页上,并使用它,它似乎扭曲的边缘,非常参差不齐。谷歌是否使用额外的库来实现这种反锯齿或者我是否做错了什么?
我喜欢在我的商业作品中使用Google Webfonts,但它们呈现得有点过于锯齿,但在Google提供的预览中,它们渲染得非常流畅。Google Webfonts和反锯齿
检查了这一点: http://www.google.com/fonts/specimen/Oxygen
最大的预览看起来非常漂亮和流畅,但是当我将其导入我的网页上,并使用它,它似乎扭曲的边缘,非常参差不齐。谷歌是否使用额外的库来实现这种反锯齿或者我是否做错了什么?
如果您从系统(windows/fonts文件夹)中卸载字体,您应该能够顺利看到它。 为了克服这一点。不要使用@import或谷歌的直接链接。 宁可从www.fontsquirrel.com(整个网络字体工具包)下载软件包,并在css中使用@ font-face以获得流畅的字体。
字体渲染不同的基础上:
你的字体在Chrome和Firefox中,看起来更糟糕的是,您可以尝试让这些浏览器更好地呈现它们。没有看到你的代码的唯一的东西,我可以建议是:
确保您使用的是体面的复位CSS(是这样的:http://meyerweb.com/eric/tools/css/reset/)。
尝试将font-weight: normal;
添加到字体以查看是否有所作为;有时浏览器和框架尝试添加一个虚假的大胆事物。
确保您使用的是实际版本的字体,而不仅仅是应用CSS样式。
如果一切都失败了,那么尝试将字体大小向上/向下颠倒一点点,看看字体是否对这些尺寸有更好的提示。
希望这有助于!
'font-weight:normal;'在使用自定义.woff字体的Chrome 31测试版中,我的情况有了很大的不同。谢谢! –
我并不了解完整的技术细节,但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修复程序,但我找不到任何有关这方面的信息)。
进一步阅读:
-webkit-font-smoothing
demo上Codepen。希望我能帮上忙。 :)
需要一些代码来告诉什么是错的....! –
你在你的网站上使用哪种字体大小的字体? –
例子?你还使用什么操作系统,浏览器和屏幕? 所有这些因素都有助于字体渲染。 – Stuart