Chrome 中 @font-face 的可怕渲染答案

【问题标题】：Horrible rendering of @font-face in ChromeChrome 中 @font-face 的可怕渲染
【发布时间】：2012-02-15 12:50:44
【问题描述】：

嗨，

我想知道是否有办法强制 Chrome（包括 Safari 和 Opera）更好地呈现 @font-face 加载的字体？我不确定是不是只有这两种字体，但我真诚地怀疑它。

上面的截图是 Firefox 8 中文本的渲染。下面这张来自 Chrome(16)。现在，如果它在 IE 中的渲染效果也很糟糕，这不会让我感到困扰 - 但在 IE 中它的渲染效果非常好（类似于 FF）。

所以，我确实尝试了一些方法：

现在，我可以不再是一个烦人的完美主义者，而只需使用图像作为徽标（因为较小的文本不会呈现那么糟糕，但仍然很糟糕，请注意）并完成它。

我不是很喜欢那个解决方案，但如果没有其他解决方案，我会接受。

谢谢！

【问题讨论】：

【解决方案1】：

您还可以确保主要使用 SVG 格式。这样做的结果是字体将在 Opera/Chrome 中完美呈现，缺点是我发现出现了行高问题。

使用特定于 chrome 的媒体查询并将字体替换为 SVG 版本。

【讨论】：

【解决方案2】：

https://stackoverflow.com/a/9041280/1112665

如果您的代码来自字体松鼠，它可能就像重新排列某些 css 的顺序一样简单。

【讨论】：

【解决方案3】：

我在 OS X 上看到的情况几乎完全相反。Chrome、Safari 都很好，而 Firefox 显示不正确。

Chrome 18.0.1003.1 开发版：

Safari 5.1.2 (7534.52.7)：

火狐 9.0.1：

Opera 11.60 Build 1185：

Internet Explorer 9.0.8112（在 Parallels VM 下）：

看来Windows 7@font-face的问题挺常见的，总体上还有很多不一致的地方：

【讨论】：

这是什么魔法？！什么？我的天啊。我被诅咒了。 D：你是怎么做到的！？好吧，我在 Windows 7 上（将切换到 Chrome Dev 频道，看看我是否会得到相同的结果）。
@withado。我在 OS X 上。另外，100 像素以上的 FF 看起来不错。
在我的带有 chrome 16 的 winxp 机器上，它呈现的效果就像在这个答案中的 chrome 18 的图像上一样
哦，是的。我安装了 Chrome 18-dev；不好。 Opera 的渲染与 Chrome 非常接近。
@withado。看起来 Travis J 的结果可能是特定于 Windows 7 的。