みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

CSSでテキストのアンチエイリアスの感じを調整する

-webkit-font-smoothing、-moz-osx-font-smoothingとかってなんだろうとおもって調べてみたのですが、mozillaのページにすべてが載ってました。

developer.mozilla.org


一部を翻訳して抜粋すると、

WebKitは、同様のプロパティを実装していますが、異なる値: -webkit-font-smoothing実装しています。 これはMac OS X / macOSでのみ動作します。

auto - ブラウザに決定させます(利用可能な場合はサブピクセルアンチエイリアスを使用しますが、これがデフォルトです)
none - フォントスムージングをオフにします。 鋭いエッジのギザギザのテキストを表示します。
antialiased - サブピクセルではなく、ピクセルのレベルでフォントを滑らかにします。 暗い背景のライトテキストのサブピクセルレンダリングからアンチエイリアスへの切り替えは、より明るく見せます。
subpixel-antialiased - ほとんどの非網膜ディスプレイでは、これは最も鮮明なテキストを与えるでしょう。

Firefoxは同様のプロパティを実装しますが、 -moz-osx-font-smoothing異なる値を実装しています。 これはMac OS X / macOSでのみ動作します。

auto - ブラウザがフォントスムージング(通常はgrayscale最適化を選択できるようにします。
grayscale - サブピクセルではなく、グレースケールのアンチエイリアシングを使用してテキストをレンダリングします。 暗い背景のライトテキストのサブピクセルレンダリングからアンチエイリアスへの切り替えは、より明るく見せます。

とのこと。
スマホが普及して、世の中にいろんなピクセル密度のディスプレイが氾濫している昨今、必要なプロパティなのかもしれません。

ただし、

非標準
この機能は標準ではなく、標準化された機能ではありません。 ウェブに直面している制作サイトでは使用しないでください。 実装間に大きな非互換性があり、今後この動作が変わる可能性があります。

とのことです。