font-optical-sizing
font-optical-sizing は CSS のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 79 | 17 | 62 | 13.1 | 79 | 13.4 | |
auto | 79 | 17 | 62 | 13.1 | 79 | 13.4 |
none | 79 | 17 | 62 | 13.1 | 79 | 13.4 |
基本構文
CSS
body {
font-optical-sizing: auto;
}
.no-optical {
font-optical-sizing: none;
}ライブデモ
実務での使いどころ
-
サイズ最適化されたテキスト表示
バリアブルフォントを使用するサイトでfont-optical-sizing: autoを設定し、見出しと本文の両方で最適な字形を自動選択します。
注意点
- オプティカルサイズ軸を持たないフォントではこのプロパティは効果がありません。使用するフォントの対応状況を確認してください。
アクセシビリティ
- オプティカルサイジングは小さなテキストの可読性を向上させるため、アクセシビリティの観点から有効にすることを推奨します。