font-variation-settings

CSS の font-variation-settings プロパティは、変更したい特性の4文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を提供します。

メモ: このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば font-weightfont-style) を設定するための基本プロパティがない場合にのみ使用してください。
メモ: font-variation-settings を使用して設定されたフォント特性は、常に font-weight などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。

構文

/* 既定の設定を使用 */
font-variation-settings: normal;

/* 可変フォントの軸名の値を設定 */
font-variation-settings: "XHGT" 0.7;

/* グローバル値 */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

このプロパティは1つまたは2つの形を取ることができます。

normal
テキストは既定の設定を使用してレイアウトされます。
<string> <number>
テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字から成る <string> と、続いて設定する軸の値を示す number の組み合わせから成ります。 <string> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコード点の範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、 <number> は小数や負の数を取ることもできます。

形式文法

normal | [ <string> <number> ]#

登録済みの軸と独自の軸

可変フォントの軸には、登録済みの軸と独自の軸があります。

登録済みの軸はよく現れます。 — 仕様書の作者が標準化する価値があると感じるほどよく使われます。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。

こちらは関連する CSS プロパティに対応する登録済みの軸です。

軸のタグ CSS プロパティ
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz"

font-optical-sizing

独自の軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得、例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も4文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。

メモ: 登録済みの軸のタグは小文字のタグを使用するのに対し、d久慈の軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。

登録済みの軸を記述した以下のデモを見てください。その他の可変フォントの例は、 可変フォントガイド, v-fonts.com, and axis-praxis.org などで見られます。

警告: オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。

Weight (wght)

以下のデモの CSS は、フォントの重みの値を編集することができます。

Slant (slnt)

以下のデモの CSS は、フォントの傾きの値を編集することができます。

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-variation-settings の定義
草案 初回定義

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類transform
正規順序構文通り

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 62Edge 完全対応 17Firefox 完全対応 62
完全対応 62
未対応 53 — 62
無効
無効 From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 49Safari 完全対応 11
補足
完全対応 11
補足
補足 Requires macOS 10.13 High Sierra or later.
WebView Android 完全対応 62Chrome Android 完全対応 62Edge Mobile 完全対応 17Firefox Android 完全対応 62
完全対応 62
未対応 53 — 62
無効
無効 From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 49Safari iOS 完全対応 11
補足
完全対応 11
補足
補足 Requires iOS 11 or later.
Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,