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

関連情報