Firefoxのフォントレンダリングがそれほど大胆なのはなぜですか？
https://www.example.com on ChromeとFirefoxを比較すると、ChromeよりもFirefoxの方が大胆な結果が得られます。
どうしてこれなの？どうすれば修正できますか？
（上のスクリーンショットはChrome、下のスクリーンショットはFirefoxです。）
間隔は少し異なりますが、アンチエイリアシングとエッジカラーに基づく目の錯覚だと思います。 800％にズームしたスニペットを次に示します。
Chrome、Firefoxの太字：
Chromeの通常のテキスト：
Firefoxの通常のテキスト：
文字の暗い外観は、いくつかの隣接するピクセルの「平均的な」または集合的な暗さによって作成されます。場合によっては、一方のブラウザが2つの暗い色のピクセルで通常の文字の垂直バーをレンダリングし、もう一方のブラウザが2つの明るい色のピクセルで囲まれた中央の非常に暗いピクセルを使用するか、1つが2つの中程度の暗い色を並べて使用します。 -側ともう一方は、明るい色の隣に非常に暗い色を使用します。良い例：t（最初の行の1文字目）、およびpl（2行目の2番目と3番目の文字）。
eの左側にある暗いアンチエイリアシングの色により、ChromeレンダリングはFirefoxバージョンよりも広く見えます。Firefoxではdの垂直バーは太く見えますが、bの垂直バーは太字に見えます。 Chromeではより大胆に見えます。
より具体的にするには、通常のテキストの2行目の最初の文字である小文字のmを比較します。そのキャラクターの場合、縦線を見るとFirefoxは太字で表示されます。どうして？
どちらのブラウザも垂直方向を3列のピクセルとしてレンダリングするため、線は実際には同じ幅です。ただし、コンポーネントの色により、Firefoxの垂直方向が広く表示されます。非常に明るい色は、暗い色よりも見かけの幅に影響を与えません。中程度から暗い色（明度の値が50％を超えない程度）が最大の効果を発揮します。各垂直バーの色をサンプリングし、HSL色空間を使用して明度の値に変換しました。
最初の脚は両方とも非常に暗い中央のバーがあり、その隣に境界線の暗いバーがあります。 Firefoxのバーは少し暗くなります。
真ん中の脚の場合、Chromeには暗いバーが1つだけあり、非常に暗い（黒）。Firefoxには暗いバーが1つと中程度の暗いバーがあり、どちらもChromeの黒いバーよりも「はるかに」明るい。どちらも暗いと認識されるほど暗いため、Firefoxの脚は広く見えます。
右脚の場合、Chromeには1つの暗いバーがあり、Firefoxには2つの中程度の暗いバーがあります。それぞれ、Chromeの暗いバーよりもかなり明るいですが、暗いと認識されるほど暗いので、 Firefoxでは脚が広く見えます。
これらは白地に暗い文字であるため、明度よりも暗さの観点から考える方が簡単です。次の表に補数の値を示します（通常のサイズで見た場合、明るい色でもある程度の暗さになります）。
通常のサイズで文字を見ると、文字の輪郭の「暗い」の総量と、ある程度は線の見かけの幅が、多かれ少なかれ大胆さの錯覚を与えます。上のグラフは、文字mのすべての脚の暗さの値をまとめたものです。 FirefoxmはChrome mよりも15％暗いです。前述のように、Firefoxでは見かけの線の太さが広くなっていますが、通常のサイズと表示速度ではそれほど知覚できません。
そのため、FirefoxのmはChromeよりも太字に見えます。ただし、これは文字ごとに異なることに注意してください。同じ理由で、最初の文字t、3番目の文字b、 "for"のf、次にpと2行目のtの前のhは、Chrome）で太字に見える文字の中にあります。 。
一部の文字では、一方のブラウザで1つのカテゴリが太字に見え、もう一方のブラウザで同じ文字の別の業種が太字に見えます。たとえば、2行目の「なし」のhとu。