為什麼 Firefox 字體渲染得如此粗體？

Question 1

間距略有不同，但我認為這是基於抗鋸齒和邊緣顏色的視錯覺。以下是放大至 800% 的一些片段：

Chrome 和 Firefox 粗體字母：

Chrome 正常文字：

火狐瀏覽器普通文字：

字母的黑色外觀是由幾個相鄰像素的“平均”或集體黑暗創建的。在某些情況下，一個瀏覽器將使用兩個深色像素渲染普通字母的垂直條，而另一個瀏覽器將使用由兩個淺色像素包圍的中心非常暗的像素，或者一個瀏覽器將並排使用兩種中深色像素一側和另一側將在淺色旁邊使用非常深的顏色。很好的例子：（t第一行的第一個字元）和pl（第二行的第二個和第三個字元。

左側較暗的抗鋸齒顏色使eChrome 渲染看起來比 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

Answer