web-dev-qa-db-ja.com

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

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

enter image description hereenter image description here

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

cssfontsbackgroundbold
21
Philip

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

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

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

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

実際には 既知バグ ：

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

-webkit-font-smoothing:antialiased

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

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

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

8
Armin Cifuentes

これは目の錯覚ではありません。これは、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;を使用してみてください。

1
armin

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

0
Gavin