如何在不禁用它们的情况下修复 Firefox 中网页字体的丑陋非 ClearType 渲染？

Question

我在 Firefox 中遇到字体渲染问题。我在 Windows 7 中禁用了 ClearType/字体平滑，因为我不喜欢平滑的字体（在系统控制面板的性能部分中未选中“屏幕字体的平滑边缘”），现在看来可下载的网络字体的许多用途在我的浏览器中呈现非常糟糕，例如：

请注意，一些（但不是全部）垂直线以粗体显示 [文本来源]。

我知道这与可下载的网络字体有关，因为常规字体似乎可以正确呈现。我可以通过完全禁用下载的字体来解决这个问题：

gfx.downloadable_fonts.enabled = false

但是，我更愿意下载字体并让它们正确呈现。如何配置 Firefox 以便可下载的 Web 字体在没有字体平滑的情况下很好地呈现？

另外，我试图摆脱的效果是什么？似乎正在渲染字体以使平滑版本看起来更好，但这并没有因为平滑而被禁用。我在 Chrome 中也遇到了类似的问题。

我在用：

• Windows 7的
• 火狐 40

Answer 1

因此，我可能应该发布自从最初提出问题以来我学到的答案。

tl;dr：创建在屏幕分辨率下渲染良好且不进行字体平滑的字体的成本很高，因此大多数网络字体制造商甚至不会尝试。如果不进行字体平滑处理，就无法使带有严重暗示的字体看起来可以接受。

核心问题是，创建一种在屏幕上看起来不错的字体似乎很昂贵。字母的形状存储为数学定义的曲线，可以缩放到任何分辨率，但在低分辨率下，这些曲线不能很好地落在正确的像素上，因此它们需要一种称为字体提示的东西才能清晰显示。字体提示可以手动完成，也可以通过计算机程序（例如ttfautohint ）自动完成。

最好的结果来自手动提示的字体。微软花了很多钱来手动提示 Windows 中传统上包含的字体，因此即使没有 ClearType/Font Smoothing，它们也能很好地显示。

自动提示字体的效果要差很多。它们中的大多数需要某种 ClearType/Font Smoothing 才能在低分辨率下获得可接受的显示结果，因为它们的原始形式看起来就像我在原始问题中包含的屏幕截图中的垃圾，带有双粗线等。

这曾经不是一个很大的问题，因为大多数网页设计时都使用用户计算机上已有的字体，而且这些字体通常是高质量的。然后发明了网络字体，这让每个网站设计者都可以忽略用户的高质量本地字体，而是使用一些他们喜欢的低质量字体。这也鼓励了UI 图标和徽标等自定义字体的使用。

因此，如果您讨厌 ClearType/Font Smoothing 并拥有标准分辨率的显示器，那么除非您尝试从正在查看的网页中夺取对字体选择的控制权，否则您就是 SOL。这将是一场艰难而漫长的战斗，因为文本通常使用本地字体可以完美呈现，但您仍然需要图标的网络字体。您可能不想使用浏览器标志来完全禁用网络字体。这里有一些有用的工具。

Chrome：字体拦截器。该工具将允许右键单击某些文本并阻止使用的自定义字体。它可以在许多网页上运行，但谷歌的属性越来越多地出现问题。

Firefox：字体拦截器foxified。该工具似乎与上面的 Chrome 扩展相同，但针对 Firefox 进行了打包。它的工作原理是一样的。

我确实希望有人能为网络字体创建类似广告拦截器的东西，它将使用社区管理的字体替换和页面修复列表来使网络无需非图标网络字体即可轻松浏览。

最终，向更高显示像素密度的转变将使这个问题变得毫无意义。