font-optical-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

font-optical-sizing は CSS のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。

試してみましょう

構文

css
/* キーワード値 */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */

/* グローバル値 */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: unset;

値

none

ブラウザーは表示の最適化のために書体の形を変更しません。

auto

ブラウザーは表示の最適化のために書体の形を変更します。

解説

オプティカルサイズは、光学的サイズ変化軸を持つフォントに対して既定で有効になります。オプティカルサイズ変化軸は font-variation-settings の opsz で表されます。

オプティカルサイジングを使用した場合、小さな文字サイズは太いストロークと大きなセリフで表現されることが多く、逆に大きな文字サイズは太いストロークと細いストロークのコントラストが強くなり、より繊細に表現されることが多くなります。

公式定義

初期値auto
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

font-optical-sizing = 
  auto  |
  none

例

オプティカルサイズの変更を無効化

html
<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>
css
@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 からダウンロードできます。

仕様書

Specification
CSS Fonts Module Level 4
# font-optical-sizing-def

ブラウザーの互換性

BCD tables only load in the browser

関連情報