谷歌网页字体在Windows上的Chrome中呈现出不稳定状态
Joe*_*oey 50 css fonts svg google-chrome google-webfonts
我在我的网站上使用Google Webfonts服务并严重依赖它.它在大多数浏览器上呈现得很好,但在Windows上的Chrome中它呈现得特别糟糕.非常不稳定和像素化.
到目前为止我发现的是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似乎终于解决了这个问题:
Tom*_*duy 66
2014年8月更新
谷歌终于在Chrome 37中修复了这个问题!但由于历史原因,我不会删除这个答案.
问题
创建该问题是因为chrome实际上无法使用正确的抗锯齿渲染TrueType字体.但是,chrome仍然可以很好地呈现SVG文件.如果您使用woff上方的语法移动svg文件的调用,chrome将下载svg并使用它而不是woff文件.像你这样的一些技巧建议工作得很好,但仅限于某些字体大小.
但是这个错误对于Chrome开发团队来说是众所周知的,并且自2012年7月以来一直在修复.请参阅官方错误报告主题:https://code.google.com/p/chromium/issues/detail？id = 137692
2013年10月更新(感谢@ Catch22)
显然,某些网站在渲染svg时可能会出现间歇性间距问题.所以有一种更好的方法来剥皮.如果您使用特定于Chrome的媒体查询来调用svg,则间距问题会消失:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'MyWebFont';
src: url('webfont.svg#svgFontName') format('svg');
}
}
第一种解决方案:
Fontspring防弹语法被修改为首先服务于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');
}
进一步阅读:
- 遗憾的是,这仍然是一个问题(最后更新于2013年4月24日)https://code.google.com/p/chromium/issues/detail?id=137692#c104 (6认同)
- Fontspring博客文章已更新,建议使用Chrome特定的媒体查询,以避免在使用SVG时出现一些间距问题 - http://www.fontspring.com/blog/smoother-rendering-in-chrome-update (2认同)
Dan*_*chs 18
-webkit-text-stroke: 0.5px;
仅在大文本上使用它,因为它会影响您的页面性能.