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 2020年3月.
font-optical-sizing は CSS のプロパティで、テキストの描画をそれぞれの大きさでの表示に最適化して表示するかどうかを設定します。
試してみましょう
font-optical-sizing: auto;
font-optical-sizing: none;
<section id="default-example">
<div id="example-element" style="font-optical-sizing: auto">
<h2>Chapter 3</h2>
<p>
On this particular Thursday, something was moving quietly through the
ionosphere many miles above the surface of the planet; several somethings
in fact, several dozen huge yellow chunky slablike somethings, huge as
office blocks, silent as birds.
</p>
</div>
</section>
@font-face {
src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
font-family: Amstelvar;
font-style: normal;
}
#example-element {
font-family: Amstelvar;
text-align: left;
}
#example-element h2 {
font-size: 36px;
}
#example-element p {
font-size: 12px;
}
構文
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: revert-layer;
font-optical-sizing: unset;
値
解説
オプティカルサイズは、光学的サイズ変化軸を持つフォントに対して既定で有効になります。オプティカルサイズ変化軸は 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 |
ブラウザーの互換性
Loading…