font-variation-settings

font-variation-settings は CSS の記述子で、 @font-face アットルールの中で OpenType または TrueType の低水準のフォントバリエーションを指定することができます。この記述子の値は、グローバルキーワード値を除いて font-variation-settings と同じです。

この記述子は、要素全体ではなく @font-face アットルールのフォントオブジェクトにバリエーション値を設定するので、要素内の一部の字体だけがこの記述子を使用して描画されるかもしれません。

構文

css
/* 既定の設定を使用 */
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> は小数や負の数を取ることができます。

公式定義

関連するアット規則@font-face
初期値normal
計算値指定通り

形式文法

font-variation-settings = 
normal |
[ <string> <number> ]#

@font-face ルール内でフォントの太さと幅を設定

css
@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;
}

仕様書

Specification
CSS Fonts Module Level 4
# font-rend-desc

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variation-settings

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

関連情報