Chrome中@ font-face的渲染效果很糟糕

Question

您好，

我想知道是否有办法以某种方式迫使Chrome（包含Safari和Opera）更好地呈现@font-face加载的字体？我不确定它是否仅仅是这两种字体，但我真诚地怀疑它。

顶部快照是Firefox 8中文本的呈现。下面的一个是来自Chrome（16）。现在，如果它在IE中渲染得非常好，那么这不会让我感到非常困扰，但是在IE中，它渲染非常奇妙（类似于FF）。

所以，我确实尝试了一些事情：

1. 尝试应用text-shadow。它让它看起来好一点，但仍然非常糟糕。
2. 我尝试使用-webkit-font-smoothing: antialiased，但这似乎没有任何影响。

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

我真的不喜欢这个解决方案，但如果没有其他解决方案，我会接受它。

谢谢！

Answer 1

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

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

Answer 2

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

Chrome 18.0.1003.1 dev：

Safari 5.1.2（7534.52.7）：

Firefox 9.0.1：

Opera 11.60 Build 1185：

Internet Explorer 9.0.8112（在Parallels VM下）：

看起来Windows 7 @font-face问题非常普遍，而且一般存在很多不一致之处：

• @Font-Face Windows Woes（flynsarmy.com - 2010/05/29）
• @font-face gotchas（http://paulirish.com/ - 2010/05/05）
• Font-face embedded fonts look fuzzy in Windows 7 browsers
• @font-face rendering in Windows 7

Answer 3

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

使用特定于Chrome的媒体查询，并将该字体专门替换为SVG版本。