font-variation-settings

font-variation-settings は CSS の記述子で、 @font-face 規則の中で OpenType または TrueType の低レベルのフォントバリエーションを指定することができます。

関連する @規則@font-face
初期値normal
メディアすべて
計算値指定値
正規順序形式文法における値の出現順

構文

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

/* OpenType 軸名の値を設定 */
font-variation-settings: "xhgt" 0.7;

normal
テキストは既定の設定を使用してレイアウトされます。
<string> <number>
テキストを描画するとき、 OpenType 軸名のリストがテキストレイアウトエンジンに渡され、フォント機能を有効化または無効化します。それぞれの設定は常に <string> が4つの ASCII 文字で、その後に字句の値を示す number が続きます。 <string> の長さが異なっていたり U+20 - U+7E 以外のコードポイントの範囲の文字が含まれていたりした場合は、プロパティ全体が無効になります。 <number> は小数や負の数を取ることができます。

形式文法

normal | [ <string> <number> ]#

@font-face {
  font-family: 'OpenTypeFont';
  src: url('open_type_font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'wght' 400, 'wdth' 300;
}

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-variation-settingsChrome 完全対応 62Edge 完全対応 79Firefox 完全対応 60
無効
完全対応 60
無効
無効 From version 60: 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 未対応 なしWebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 60
無効
完全対応 60
無効
無効 From version 60: 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 完全対応 46Safari iOS 未対応 なしSamsung Internet Android 完全対応 8.0

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報