我发现到目前为止,Chrome需要首先加载.svg格式的字体。我使用的字体,称为Asap,只有.woff可用。我使用免费在线服务将其转换为.svg,但当我添加到我的样式表(.woff之前),它没有改变任何东西。
我也试过:
-webkit-font-smoothing: antialiased; text-shadow: 0px 0px 0px;
希望或者将帮助文本呈现更顺利。
现在我已经用完了想法,我会讨厌改变字体。有没有人有一个想法我如何可以解决这个问题?我一直在使用Adobe Browserlab来测试渲染,看看我如何只有一个mac。链接到网站是:www.symvoli.nl/about
提前致谢!
编辑:2013年4月11日:
Chrome 35 Beta似乎终于解决了这个问题:
解决方法
Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won’t delete this answer.
问题
由于chrome实际上无法使用正确的抗锯齿渲染TrueType字体,因此会创建该问题。然而,chrome仍然渲染SVG文件。如果你移动你的svg文件的调用在你的语法上面的woff,chrome将下载svg并使用它而不是woff文件。像你的一些技巧建议工作,但只有某些字体大小。
但是这个bug是Chrome开发者团队非常熟知的,并且自2012年7月以来一直在修复。请参见官方错误报告线程在这里:https://code.google.com/p/chromium/issues/detail?id=137692
更新2013年10月(感谢@ Catch22)
显然,一些网站在渲染svg时可能会出现间歇性间隔问题。所以有一个better way到皮肤它。如果您使用特定于Chrome的媒体查询来调用svg,间距问题就会消失:
@media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'MyWebFont'; src: url('webfont.svg#svgFontName') format('svg'); } }
修改Fontspring bulletproof语法以首先提供svg:
@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-opentype'),url('webfont.svg#svgFontName') format('svg'),url('webfont.woff') format('woff'),url('webfont.ttf') format('truetype'); }
进一步阅读:
> CSS properties that affect type rendering
> Smoother Web Font Rendering in Chrome for Windows
> How to Bulletproof @font-face Web Fonts