问题状态,2014 年 6 月:已在 Chrome 37 中修复
最后,Chrome 团队将在 Chrome 37 中发布针对此问题的修复程序,该修复程序将于 2014 年 7 月向公众发布。请在此处查看当前稳定的 Chrome 35 和最新的 Chrome 37(早期开发预览)的示例比较:
![在此处输入图像描述](https://i.stack.imgur.com/uZjfN.png)
问题状态,2013 年 12 月
1.)通过或Google 的.加载字体时没有适当的解决方案。问题是 Chrome 只是从谷歌的 API请求.woff文件,这些文件呈现得很糟糕。令人惊讶的是,所有其他字体文件类型都呈现精美。但是,有一些 CSS 技巧会稍微“平滑”渲染的字体,你会在这个答案中找到更深层次的解决方法。@import
<link href=
webfont.js
2.) 自托管字体时有一个真正的解决方案,首先由Jaime Fernandez在此 Stackoverflow 页面上的另一个答案中发布,它通过以特殊顺序加载 Web 字体来解决此问题。简单地复制他的出色答案我会感觉很糟糕,所以请在那里看看。还有一个(未经证实的)解决方案建议仅使用 TTF/OTF 字体,因为它们现在几乎所有浏览器都支持。
3.) Google Chrome 开发团队致力于解决这个问题。由于渲染引擎已经发生了一些巨大的变化,因此显然有些事情正在进行中。
我已经写了一篇关于这个问题的大型博客文章,请随意看看:
如何修复 Google Chrome 中丑陋的字体渲染
可重现的例子
看看今天在 Chrome 29 中最初问题的示例如何:
正面例子:
左:Firefox 23,右:Chrome 29
![在此处输入图像描述](https://i.stack.imgur.com/IZcl5.png)
正面例子:
顶部:Firefox 23,底部:Chrome 29
![在此处输入图像描述](https://i.stack.imgur.com/xdTlf.png)
反例:铬 30
![在此处输入图像描述](https://i.stack.imgur.com/zHjYT.png)
反例:Chrome 29
![在此处输入图像描述](https://i.stack.imgur.com/sf6pk.png)
解决方案
使用 -webkit-text-stroke 修复上面的截图:
![在此处输入图像描述](https://i.stack.imgur.com/fdU03.png)
第一行是默认的,第二行是:
-webkit-text-stroke: 0.3px;
第三行有:
-webkit-text-stroke: 0.6px;
所以,修复这些字体的方法就是给它们
-webkit-text-stroke: 0.Xpx;
或 RGBa 语法(由 nezroy 提供,在评论中找到!谢谢!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
还有一种过时的可能性:给文本一个简单的(假的)阴影:
text-shadow: #fff 0px 1px 1px;
RGBa 解决方案(在 Jasper Espejo 的博客中找到):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
我为此发表了一篇博文:
如果您想了解此问题的最新信息,请查看相应的博客文章:如何修复 Google Chrome 中丑陋的字体渲染。如果有这方面的消息,我会发布消息。
我原来的答案:
这是 Google Chrome 中的一个大错误,Google Chrome 团队确实知道这一点,请参阅此处的官方错误报告。目前,在 2013 年 5 月,即使在报告该错误 11 个月后,也没有解决。奇怪的是,唯一搞乱 Google Webfonts 的浏览器是 Google 自己的浏览器 Chrome(!)。但是有一个简单的解决方法可以解决问题,请参阅下面的解决方案。
2013 年 5 月 Google Chrome 开发团队的声明
错误报告评论中的官方声明:
我们的 Windows 字体渲染正在积极进行中。...我们希望在开发人员可以开始使用的一两个里程碑中拥有一些东西。与往常一样,它变得稳定的速度取决于我们能够以多快的速度根除并消除任何回归。