为什么浏览器会在纯色字体颜色中添加蓝色和棕色?

平面设计 网站设计 字体 css 抗锯齿 亚像素渲染
2022-01-10 01:44:33

我想知道为什么我的浏览器 (Firefox) 在右侧添加蓝色色调,在左侧添加纯灰色 (#333333) 字体颜色,如下图所示。

Firefox 中的颜色选择器工具显示添加到纯灰色字体的蓝色和棕色色调

有人可以向我解释为什么会这样吗?

2个回答

它被称为亚像素渲染,或亚像素抗锯齿。微软为大多数 Windows 应用程序做了类似的事情。

您的屏幕由彼此相邻的颜色组成。如果你做一个简单的基于样本的抗锯齿,你不会得到最好的结果。但是,通过利用有关如何布置像素的知识,您可以获得更好的结果。当您处理的数据少于一个像素时。

不过,您应该小心。不同的显示器对颜色发射有不同的安排(因此@PaoloGibellini 提到了调谐器)。因此,如果您准备非常高质量的屏幕截图,最好关闭子像素渲染,否则您将收到 2 次错误*。同样,如果您将屏幕截图用于打印,最好禁用此功能,否则您的文本将看起来像一条模糊的彩虹。

*一次由显示器,有一个顺序,一次由图片,有不同的顺序

这称为亚像素渲染不同的颜色是可见的,因为图像已被炸毁。举一个黑底白字的例子会更容易。

亚像素渲染的解释

想象一条一像素粗的白线。在大多数桌面 LCD 屏幕上,各个子像素颜色是水平排列的。只要打开所有三个颜色像素,我们就会看到一个像素厚的白线 - 颜色的顺序无关紧要。这就是前两行显示的内容。使用亚像素渲染将屏幕的水平分辨率提高了三倍,这在阅读水平文本时特别有用。

但是,当您截取屏幕截图并将其放大时,您看到的不是子像素,而是它们组合产生的颜色。当我们的一像素线与像素对齐时,您只会看到一像素白线。但如果不是,您将看到由两种颜色组成的两像素粗线。如果您离屏幕足够近,可以看到像素之间的间隙,您可以亲自看到这一点 - 如果您离得足够近,您的眼睛可能无法同时解决分割的像素,您会看到这条线是两条像素宽。但是如果屏幕分辨率足够高,那么亚像素渲染就可以很好地工作,并且只有在放大屏幕截图时才会注意到。