css - CSS-黒い背景に白いテキスト、太字に見える

Question

黒の背景に白のテキストを使用すると、テキストは見た目よりも太く見えます。cssを使用した純粋なテキスト。typekit.orgフォントを使用しています。

これを修正する方法はありますか、それともある種のアンチエイリアシングの問題ですか？

Answer 1

ブラウザでアンチエイリアシングアルゴリズムが使用されているため、テキストは太字になっています。確認は簡単です。IE、Safari、Firefox、Chromeでスクリーングラブを取りましょう。それらはすべて異なるアンチエイリアスです。テキストを他のテキストよりも太く見せるものもあります。一般的に、より良いテキストは黒地に白く見え、太くは逆に見えます。

ここに完全な説明があります：http ：//www.lighterra.com/articles/macosxtextaabug/

これにより、ほとんどのブラウザでアンチエイリアスがオフになります。

body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

Answer 2

実際、これは既知の バグです：

私はこれを使用してこれを修正することができました：

-webkit-font-smoothing:antialiased

出典：この記事（archive.orgにキャッシュ）。

ちょっと遅いですが、それでも一部の人には役立つかもしれません。

これは推奨されないことを覚えておいてください。MacOSを使用していて、暗い背景に明るいテキストを使用している場合を除きます。

Answer 3

これは目の錯覚ではありません。これは、2018年にまだ存在するOSおよびブラウザー関連の問題です。この小さなスニペットは、問題を示しています。

<div style="background-color: #000; font-size: 16px; position: relative;">
  <div style="color: #fff;">Hello World</div>
  <div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>

macOSボックスの前に座っていると、白い輪郭に気付くかもしれません。それらは、やる気のあるフォントスムージングの結果です。-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;この影響を減らすために使用してみてください 。

Answer 4

font-smoothing: antialiasedまたはfont-smoothing: grayscale（他の人が言及したように）の組み合わせでtext-rendering: optimizeLegibility、明るい色と暗い色、およびさまざまなブラウザ間で一貫した結果を生成できることがわかりました。すべてのフォントで同じ結果が得られるわけではないため、各ブラウザで適切なテストを行う必要があります。設定だけでうまくいくこともあれば、font-smoothing設定だけでtext-renderingうまくいくこともあり、両方を使用する必要があることもあります。