![为什么 Firefox 字体渲染得这么粗?](https://linux22.com/image/1558627/%E4%B8%BA%E4%BB%80%E4%B9%88%20Firefox%20%E5%AD%97%E4%BD%93%E6%B8%B2%E6%9F%93%E5%BE%97%E8%BF%99%E4%B9%88%E7%B2%97%EF%BC%9F.png)
当我比较https://www.example.com在 Chrome 和 Firefox 上,我看到 Firefox 上的结果比 Chrome 上的结果更大胆。
这是为什么?我该如何解决?
(上面的截图是 Chrome,下面的是 Firefox。)
答案1
间距略有不同,但我认为这是基于抗锯齿和边缘颜色的视觉错觉。以下是放大到 800% 的几个片段:
Chrome 然后 Firefox 加粗字母:
字母的暗色外观是由几个相邻像素的“平均”或集体暗色创建的。在某些情况下,一个浏览器会用两个深色像素呈现正常字母的竖条,而另一个浏览器会使用一个中心非常暗的像素,周围环绕着两个浅色像素,或者一个浏览器会并排使用两种中深色,而另一个浏览器会使用浅色旁边的非常暗的颜色。好的例子:(t
第一行的第一个字符)和pl
(第二行的第二个和第三个字符)。
左侧较暗的抗锯齿颜色使e
Chrome 渲染看起来比 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 中显示更粗的字符,原因相同。b
f
p
t
h
在某些字母中,其中一个垂直线在一个浏览器中看起来更粗,而同一字母的另一个垂直线在另一个浏览器中看起来更粗。例如,第二行“without”中的h
and 。u
答案2
在高放大倍数下仔细检查这些屏幕截图,似乎上面的(Chrome)字形实际上比下面的(Firefox)字形稍微宽一些且更粗一些。
两者都使用子像素抗锯齿,RGB 顺序适合大多数现代显示器的原始分辨率,但字距调整和提示的细节有所不同。请注意,在第一行的末尾,Chrome 中的“Yo”字样相距较远(表明字距调整不佳),整行占用的空间略大。
如果您将显示器倒置或纵向运行,或以非原始分辨率运行,或使用 CRT 显示器,则可能会造成混乱。上述任何情况都违反了子像素抗锯齿的假设,因此您应该相应地配置操作系统。