Chrome 中 @font-face 的可怕渲染

Posted 2023-03-06

【中文标题】Chrome 中 @font-face 的可怕渲染

【英文标题】：Horrible rendering of @font-face in Chrome

【发布时间】：2012-02-15 12:50:44

【问题描述】：

嗨，

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

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

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

尝试应用text-shadow。它使它看起来好一点，但仍然很糟糕。 我尝试使用-webkit-font-smoothing: antialiased，但这似乎根本没有任何效果。

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

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

谢谢！

【问题讨论】：

你能发布一些代码或演示链接，以便我们使用它吗？

你可以试试cufon

@neworld 我确实想到了，但我宁愿不要用图像替换文本（那些不能作为文本复制的）。

我得到相反的结果。 Chrome 18 dev 和 Safari 5.1.2 看起来很棒，而 FF 9.0.1 则全黑。

这个字体叫什么名字？

【参考方案1】：

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

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

【参考方案2】：

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

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

【讨论】：

哦，有趣。我会试试看。我通过放弃 font-face 解决了这个问题（因为原来的布局也改变了）。谢谢！

【参考方案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的问题挺常见的，总体上还有很多不一致的地方：

@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

【讨论】：

这是什么魔法？！什么？我的天啊。我被诅咒了。 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 的。