フォントをなめらかに見せるCSSプロパティ「font-smoothing」が便利！

おはようございます！社員Aです👩

今回は、ブラウザ上でフォントをなめらかできれいに見せることのできるCSSプロパティ「font-smoothing」を使用例も交えてご紹介します。

意外と知られていない「font-smoothing」

意外と知られていないCSSプロパティ「font-smoothing」。

これを使うことにより、WEB上でのフォントをなめらかできれいに見せることが出来ます。

これにより見た目ももちろんですが、可読性も上がると思います。

「-webkit-font-smoothing」の形で指定しますが、これには4種類の指定方法があります。

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

実際にどのような違いがあるのかを実証

上記でご紹介した4種類のパターンが実際にブラウザ上でどのように表示されるのか比較していきたいと思います。

auto（ブラウザにより決定）の場合

表示

Chromeでテストしてみました。これが一般的（デフォルト）の状態です。

none（スムージングオフ）の場合

表示

使うことは無いと思いますが、フォントスムージングをオフにします。

ギザギザの鋭いエッジでテキストを表示します。

antialiased（ピクセルレベルでフォントをなめらかにする）場合

表示

subpixel-antialiased（最も鮮明なテキスト）の場合

表示

「font-smoothing」対応ブラウザ

「font-smoothing」はモダンブラウザのみに対応しているので、IEやMicrosoft Edgeでは非対応になります。

特に通常のブラウザよりも文字が太く表示されてしまうSafariでは、このプロパティを使うことにより他のブラウザの見た目に近づけることができます。

そのため、Safariでの文字の見た目に悩んでいる方はこちらの「font-smoothing」で調整することをおすすめします！