font-smoothingは、アンチエイリアスをコントロールするCSSプロパティである。
アンチエイリアスを調節することで滑らかな表示が可能になり、スマートな文字の印象に変わる。
注意点として、このプロパティを使えるのはMacのみでWindowsでは使えない。Mac版のSafari、Opera、ChromeなどのWebkit系とFirefoxのみ、プレフィックス付きで独自実装されている。
また、WebkitとFirefoxで別のプレフィックスをつける必要があり、値も違ってくるので注意すること。
Webkit系でのfont-smoothingの設定
.smoothing_w01{
-webkit-font-smoothing: none; // ぎざぎざ
}
.smoothing_w02{
-webkit-font-smoothing: antialiased; // なめらか
}
.smoothing_w03{
-webkit-font-smoothing: subpixel-antialiased; // デフォルト値
}Firefoxでのfont-smoothingの設定
.smoothing_m01{
-moz-osx-font-smoothing: grayscale; // なめらか
}
.smoothing_m02{
-moz-osx-font-smoothing: unset; // デフォルトに戻す
}
.smoothing_m03{
-moz-osx-font-smoothing: inherit; // 親要素から継承
}
.smoothing_m04{
-moz-osx-font-smoothing: auto; // システムのデフォルトに応じる
}