我在我的网站上使用 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 似乎终于解决了这个问题:
最佳答案
2014 年 8 月更新
Google finally fixes this issue in Chrome 37 natively!!!. But for historical reasons I won't delete this answer.
问题
问题的产生是因为 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 时可能会遇到间歇性间距问题。所以有一个 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 防弹语法以首先为 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 - Google 网络字体在 Windows 上的 Chrome 中呈现不稳定，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10953037/