font-smoothingでフォントのアンチエイリアスを調整！スタイリッシュな見栄えも可能

色々なWEBサイトを見ていると、フォントがなんだか太いな・・・野暮ったいな・・・なんてことを思う時はありませんか？
そんな時は、フォントのアンチエイリアス設定がなされていないことが多いのです。

僕も元々知っていたCSSのfont-smoothingというプロパティ、改めてまとめてみたいと思います！

ブログArrownで比較! fontのアンチエイリアスを設定した時としていない時の比較

実は今回の記事を書くにおいてこのブログArrownのfontのアンチエイリアス設定を見直してみたのですが、アンチエイリアス設定を特にしていないことに気づきました・・・笑

fontのアンチエイリアス設定を特に設定していない時の見栄えを、まず見てみましょう。

fontのアンチエイリアス、デフォルトでは、「font-smoothing:subpixel-antialiased」という設定がかかっているような形になるのですが、ある程度のアンチエイリアスがかかっている状態になります。

次に、fontのアンチエイリアスをさらにかけて、細身のフォントに変身させてみます。

font-smoothing:antialiasedに値を変更してみました。
こうすることで、さらにfontが細くなったように見えます。

ちなみにfont-smoothing:none、つまり全くfontのアンチエイリアスをかけないときはどうなるのでしょうか。

おおお、フォントの見え方がガタガタになってしまっていますね・・・
CSSでフォントのアンチエイリアス設定をかけるかけないで、だいぶ見栄えが違うんだなぁということを改めて感じました。

では、CSSでfont-smoothingプロパティを適用する方法について見ていきましょう！

まず、font-smoothingプロパティはブラウザによって微妙にかけ方が違います。
対象ブラウザは、Safari、Firefox、Google Chromeの３つになるようです。

IEやEdgeには全く効かないんですね・・・

それぞれのブラウザに対してのfont-smoothingプロパティのかけ方は以下の通りです！

対象ブラウザが限られているので、-webkit-などのベンダープレフィックスが必要になるようですね！
ちなみにこのfont-smoothingプロパティ、一部のfontにのみ適用するというケースはあまりないと思いますので、bodyタグに適用すれば問題ないです。

必ずfont-smoothingをかけなければいけないということでは決してないのですが、選択肢の一つとして知っておいたほうがよいプロパティですね！

CSSもまだまだ奥が深いなぁと思う今日この頃です。