CSS - font-smoothing でテキストの見た目をクールにしよう

phi phi on css

このブログでも採用している font-smoothing という CSS プロパティについて 紹介します.

ちょっとしたサイトでも, font-familyfont-smoothing, line-height さえちゃんと調整すれば それなりの見た目にはなるのかなーなんて思ってます.

font-smoothing とは

-webkit 系でのみサポートされているプロパティで, その名のとおり font をスムーズにしてくれる CSS プロパティです.

-webkit-font-smoothing: antialiased; を指定すればフォントに エイリアスがかかってちょっとだけクールになります.

font-smoothing デモ

微妙に右側だけ線が細くなってキレイに見えるのが分かるかと思います.

font-smoothing で指定可能な値

-webkit-font-smoothing: antialiased;

アンチエイリアスをかけます. ちょっと効きすぎて線が細くなりすぎる場合があります.

-webkit-font-smoothing: subpixel-antialiased;

端数に対してのみアンチエイリアスをかけます. antialiased よりは若干弱いですが良い塩梅で見た目をスムーズにしてくれます.

-webkit-font-smoothing: none;

アンチエイリアスをオフにしちゃいます. 見た目がちょっとガタガタになります.

一通り指定したデモを作ったのでよかったら参考にしてください.

http://goo.gl/xQq739

font-smoothing の注意点

-webkit-font-smoothing: antialiased; を指定した場合, 線が細くなりすぎて読みにくくなる場合があります.

既存のサイトなどに適応する場合は, フォントサイズや色味などを調整してから反映するようにしましょう.

Reference