font-variant-alternates

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

font-variant-alternates は CSS のプロパティで、代替書体の使用を制御します。代替書体は @font-feature-values で定義された代替名で参照される可能性があります。

css
/* キーワード値 */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* 関数表記値 */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* グローバル値 */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;

@font-feature-values アット規則は、代替書体関数 (stylistic, styleset, character-variant, swash, ornament, annotation) の名前を定義し、その名前を OpenType の引数と関連付けることができます。このプロパティはスタイルシート内で (@font-feature-values で定義された) 人間が読める名前を利用できるようにします。

構文

このプロパティは二つの形式のうち一つを取ります。

  • キーワード normal
  • または、その他の下記のキーワードおよび関数を空白区切り、順不同で 1 つ以上

normal

このキーワードは代替書体を無効にします。

historical-forms

このキーワードは歴史的形式 — 過去には一般的だったけれども今日そうではない書体を有効にします。 OpenType の hist の値に対応します。

stylistic()

この関数は、個々の文字に対して表現の変更を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の salt の値に相当します (例: salt 2)。

styleset()

この関数は、一連の文字に対するスタイルの代替を可能にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の ssXY の値に相当します (例: ss02)。

character-variant()

この関数は、文字に対して特定のスタイルの選択肢を有効にします。 styleset() に似ていますが、一連の文字に対してまとまった書体を作成するわけではありませんので、個々の文字は独立した、整合が取れているとは限らないスタイルになります。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の cvXY の値に相当します (例: cv02)。

swash()

この関数は、先端装飾書体を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の swsh および cswh の値に相当します (例: swsh 2 および cswh 2)。

ornaments()

この関数は、フルーロンおよびその他の飾り書体などの装飾を有効にします。 OpenType の ornm の値に相当します (例: ornm 2)。

メモ: テキストの意味を保持するために、フォントデザイナーは、 Unicode のディングバット文字に一致しない装飾を、ビュレット文字 (U+2022) の装飾的な変種として含めるべきです。既存のフォントの中には、このアドバイスに従わないものもあるので注意が必要です。

annotation()

この関数は、丸数字や鏡文字などの注釈表記を有効にします。この函数は丸数字又は鏡文字などの表記を有効にします。この引数は、フォント固有の名前を数値に対応づけたものです。 OpenType の nalt の値に相当します (例: nalt 2)。

公式定義

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

形式文法

font-variant-alternates = 
normal |
[ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

<feature-value-name> =
<ident>

先端装飾書体を有効化

HTML

html
<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>

CSS

css
@font-feature-values "Leitura Display Swashes" {
  @swash {
    fancy: 1;
  }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}

結果

メモ: この例を有効にするには、 OpenType フォントの Leitura Display Swashes をインストールする必要があります。試験用途の無償版が、 fontsgeek.com などにあります。

仕様書

Specification
CSS Fonts Module Level 4
# font-variant-alternates-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報