font-variation-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

font-variation-settings は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を提供します。

試してみましょう

構文

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

/* 可変フォントの軸名の値を設定 */
font-variation-settings: "XHGT" 0.7;

/* グローバル値 */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: unset;

値

このプロパティは 1 つまたは 2 つの形を取ることができます。

normal

テキストは既定の設定を使用してレイアウトされます。

<string> <number>

テキストを描画する際、フォントの特性を有効または無効にするために可変フォントの軸名のリストがテキストレイアウトエンジンへ渡されます。それぞれの設定は常に、一つ以上の4文字の ASCII 文字の <string> と、続いて設定する軸の値を示す <number> の組み合わせから成ります。<string> の文字が多すぎたり少なすぎたり、文字が U+20 - U+7E のコードポイントの範囲を超えていたりした場合は、プロパティ全体が無効になります。フォントデザイナーによって定義された利用可能な値の範囲次第では、<number> は小数や負の数を取ることもできます。

解説

このプロパティは、その特性を有効にしたりアクセスしたりするための他の方法がない場合に、可変フォント特性を設定するために設計された低水準の仕組みです。これらの特性 (例えば font-weight や font-style) を設定するための基本プロパティがない場合にのみ使用してください。

font-variation-settings を使用して設定されたフォント特性は、常に font-weight などの基本フォントプロパティに関する設定を上書きし、言うまでもなくカスケードに現れます。ブラウザーによっては、 @font-face 宣言が font-weight の範囲を含んでいる場合のみこれが成り立ちます。

登録済みの軸とカスタム軸

可変フォントの軸には、登録済みの軸とカスタム軸があります。

登録済みの軸は、もっとも頻繁に遭遇するもので、仕様書の著者が標準化する価値があると感じるほど一般的なものです。なお、これは作者がフォントにすべてを入れる必要があることを意味するものではありません。

こちらは関連する CSS プロパティに対応する登録済みの軸です。

軸のタグ CSS プロパティ
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: `oblique + angle`
"ital" font-style: `italic`
"opsz"

font-optical-sizing

カスタム軸はフォントデザイナーがフォントに変化を付けるためのもの全てがあり得ます。例えばアセンダーまたはデセンダーの高さ、セリフの大きさ、その他想像できるすべてのものです。どの軸も 4 文字の固有の軸名を与えれば使用することができます。一部はもっと有名になっており、そのうち登録されるものもあるかもしれません。

メモ: 登録済みの軸のタグは小文字のタグを使用するのに対し、カスタム軸は大文字のタグを使用します。なお、フォントデザイナーはこの慣習に従うことを強制されているわけではなく、従っていないものもあります。ここで重要なことは、軸のタグは大文字と小文字を区別することです。

オペレーティングシステムで可変フォントを使用するためには、最新版であることを確認する必要があります。例えば、 Linux ベースの OS では最新版の Linux Freetype が必要であり、 macOS 10.13 より前では可変フォントに対応していません。オペレーティングシステムが最新版でない場合、ウェブページや Firefox 開発者ツールで可変フォントを使用することができません。

公式定義

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類座標変換

形式文法

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

<opentype-tag> = 
  <string>

例

他にも多数の可変フォントの例が、 可変フォントガイド, v-fonts.com, axis-praxis.org などにあります。

太さ (wght)

以下のデモの CSS は、フォントの太さの値を編集することができます。

傾き (slnt)

以下のデモの CSS は、フォントの傾きの値を編集することができます。

仕様書

Specification
CSS Fonts Module Level 4
# font-variation-settings-def

ブラウザーの互換性

BCD tables only load in the browser

関連情報