CSS
CSS3

font-smoothingで文字を綺麗に見せる

問題

文字がガタガタしてる気がする。
もっと文字綺麗に見せたい。

解決策

1行足すだけでテキストがスタイリッシュになります。

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

/*端数に対してのみアンチエイリアスをかける。
 antialiased よりは若干弱いが良い塩梅で見た目をスムーズにしてくれる*/
-webkit-font-smoothing: subpixel-antialiased;

/*アンチエイリアスのオフ。上2つと比べて少しガタガタに見える。*/
-webkit-font-smoothing: none;

font-smoothing の注意点

文字が細くなりすぎる。

解決策

font-weightをあげて、かつfont-smoothingをつける。