为什么 Firefox 字体渲染得如此粗体？

Question

当我在 Chrome 和 Firefox 上比较https://www.example.com时，我发现 Firefox 上的结果比 Chrome 上的结果更大胆。

为什么是这样？我该如何解决它？

（上面的截图是 Chrome，下面是 Firefox。）

Answer 1

间距略有不同，但我认为这是基于抗锯齿和边缘颜色的视错觉。以下是放大至 800% 的一些片段：

Chrome 和 Firefox 粗体字母：

Chrome 普通文本：

火狐浏览器普通文本：

字母的黑色外观是由几个相邻像素的“平均”或集体黑暗创建的。在某些情况下，一个浏览器将使用两个深色像素渲染普通字母的垂直条，而另一个浏览器将使用由两种浅色像素包围的中心非常暗的像素，或者一个浏览器将并排使用两种中深色像素一侧和另一侧将在浅色旁边使用非常深的颜色。很好的例子：（t第一行的第一个字符）和pl（第二行的第二个和第三个字符。

左侧较暗的抗锯齿颜色e使 Chrome 渲染看起来比 Firefox 版本更宽。Firefox 中的垂直条d看起来更粗，而 Chrome 中的垂直条看起来b更粗。

要获得更具体的信息，请比较m普通文本第二行的第一个字母的小写字母。对于该字符，当您查看垂直线时，Firefox 会显得更粗。为什么？

两个浏览器都将垂直渲染为三列像素，因此线条实际上具有相同的宽度。然而，组件颜色使 Firefox 的垂直方向显得更宽。非常浅的颜色对表观宽度的影响小于深色。中度至深色（亮度值不超过 50%）效果最佳。我对每个垂直条的颜色进行了采样，并使用 HSL 颜色空间将其转换为亮度值：

第一条腿都有一个非常暗的中心条，旁边有一个边界暗条。Firefox 的条形图有点暗。

对于中间的腿，Chrome 只有一个暗条，而且非常暗（黑色）。Firefox 有一个暗条和一个中暗条，两者都比 Chrome 的黑条“亮”很多。但它们的颜色都足够深，足以被认为是黑色的，因此 Firefox 的腿显得更宽。

对于右腿，Chrome 有一个暗条，Firefox 有两个中等暗条。它们都比 Chrome 的暗条要亮得多，但又足够暗，可以被认为是黑色的，所以同样，这条腿在 Firefox 中看起来更宽。

由于这些是白色背景上的深色字母，因此更容易将其视为黑暗而不是亮度，因此下表显示了补值（即使在正常尺寸下查看时，浅色也会产生一些黑暗）：

当以正常尺寸查看字符时，字符轮廓中的“暗”总量以及在某种程度上，线条的表观宽度或多或少地给人一种大胆的错觉。上面的图表合并了字母所有腿的暗度值m。Firefoxm比 Chrome 暗 15% m。如前所述，Firefox 中的表观线条粗细较宽，但在正常尺寸和查看速度下并不那么明显。

所以 Firefoxm看起来比 Chrome 更大胆。但请注意，这因角色而异。出于同样的原因，第一个字母t、第三个字母、“for”中的bthe 、then以及第二行之前的这些字符在 Chrome 中看起来更粗体。fpth

在某些字母中，其中一个垂直线在一个浏览器中看起来更粗体，而同一字母的另一个垂直线在另一种浏览器中看起来更粗体。例如，第二行“without”中的hand 。u