为什么 Firefox 字体渲染得这么粗？

Question 1

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

Chrome 然后 Firefox 加粗字母：

Chrome 普通文本：

Firefox 普通文本：

字母的暗色外观是由几个相邻像素的“平均”或集体暗色创建的。在某些情况下，一个浏览器会用两个深色像素呈现正常字母的竖条，而另一个浏览器会使用一个中心非常暗的像素，周围环绕着两个浅色像素，或者一个浏览器会并排使用两种中深色，而另一个浏览器会使用浅色旁边的非常暗的颜色。好的例子：（t第一行的第一个字符）和pl（第二行的第二个和第三个字符）。

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

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

两种浏览器都将垂直线渲染为三列像素，因此线条的宽度实际上相同。但是，组成颜色使 Firefox 的垂直线看起来更宽。非常浅的颜色对表观宽度的影响小于深色。中等到深色（亮度值不超过 50%）的影响最大。我对每个垂直条的颜色进行了采样，并使用 HSL 颜色空间将其转换为亮度值：

前两条腿的中心条颜色都很暗，旁边还有一条边缘较暗的条。Firefox 的条颜色稍暗一些。

对于中间的腿，Chrome 只有一个暗色条，而且颜色非常深（黑色）。Firefox 有一个暗色条和一个中等暗色条，都比 Chrome 的黑条“浅”得多。但它们都足够暗，可以感知为暗色，因此 Firefox 的腿看起来更宽。

对于右腿，Chrome 有一个深色条，而 Firefox 有两个中等深色条。它们都比 Chrome 的深色条浅得多，但足够深，可以感知为深色，因此，在 Firefox 中，那条腿看起来更宽。

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

当以正常尺寸查看字符时，字符轮廓中的“暗”总量以及某种程度上的线条的表观宽度或多或少会给人一种粗体的错觉。上表整合了字母所有边的暗度值m。Firefoxm比 Chrome 暗 15% m。如前所述，Firefox 中的表观线条厚度更宽，但在正常尺寸和查看速度下，这种感觉并不明显。

因此，Firefox 的m显示比 Chrome 的更粗。但请注意，每个字符的显示都不同。第一个字母、t第三个字母、、“for”中的、以及第二行中的之前的都是 Chrome 中显示更粗的字符，原因相同。bfpth

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

Answer