font-variation-settings

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

構文

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

関連情報