くまだどうも、くまだです。
フォントをなめらかにするCSSのfont-smoothingについて。
font-smoothing
font-smoothingはフォントのアンチエイリアスを設定できるプロパティです。
アンチエイリアスは、画面上で表示される輪郭を色の濃淡などを用いてなめらかにする処理のことです。アンチエイリアスの処理がない場合、文字がぎざぎざに表示されます。
font-smoothingの指定は以下のように記述します。
<p class="text">てきすとテキストtext</p>
<p class="text --textSmoothing1">てきすとテキストtext</p>
<p class="text --textSmoothing2">てきすとテキストtext</p>
<p class="text --textSmoothing3">てきすとテキストtext</p>
.text {
font-size: 30px;
font-weight: 700;
}
.text.--textSmoothing1 {
-webkit-font-smoothing: antialiased;
}
.text.--textSmoothing2 {
-webkit-font-smoothing: none;
}
.text.--textSmoothing3 {
-webkit-font-smoothing: subpixel-antialiased;
}
- antialiased : ピクセルレベルでフォントをなめらか。
- none : フォントのスムージングなし。ぎざぎざになる。
- subpixel-antialiased : デフォルト値。
サイト全体に一括指定する場合は、Chrome用とFirefox用で指定します。
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}ただし、font-smoothnigはCSS標準の機能ではありません（2024年現在）。また、Macでのブラウザにしか使えないので、使用した場合はWindowsでの見え方と微妙に異なる可能性があるので注意が必要です。
ここまで読んでくださりありがとうございました。