font-optical-sizing
CSS の font-optical-sizing
プロパティは、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。これは光学的サイズバリエーション軸があるフォントのみで動作します。
例えば、小さいテキストは太い角と大きなセリフで描かれる傾向があるのに対し、大きなテキストは太い角と細い角の間のコントラストがもっと微妙に描画される傾向があります。
メモ: 光学的サイズバリエーション軸は、 font-variation-settings
の opsz
で表現されます。
構文
/* キーワード値 */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */
/* グローバル値 */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: unset;
値
- none
- ブラウザーは表示の最適化のために書体の形を変更しません。
- auto
- ブラウザーは表示の最適化のために書体の形を変更します。
形式文法
auto | none
例
<p class="optical-sizing">This paragraph is optically sized.
This is the default across browsers.</p>
<p class="no-optical-sizing">This paragraph is not optically sized.
You should see a difference in supporting browsers.</p>
@font-face {
src: url('AmstelvarAlpha-VF.ttf');
font-family:'Amstelvar';
font-style: normal;
}
p {
font-size: 36px;
font-family: Amstelvar;
}
.no-optical-sizing {
font-optical-sizing: none;
}
メモ: 上記で参照されているフォント — 光学的サイズを含みライセンスフリーであるもの — はテストに適しています。 GitHub からダウンロードできます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Fonts Module Level 4 font-optical-sizing の定義 |
草案 |
初期値 | auto |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser