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

ブラウザーの互換性

BCD tables only load in the browser