Widely available 安全に使用可能。装飾的なタイポグラフィが必要な場面で活用できる。

font-variant-alternates

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

@font-feature-values アットルールを使って、与えられたフォントフェイスに対して、人間が読める名前と、特定の OpenType フォント機能を制御する数値インデックスを関連付けることができます。代替字体を選択する関数（stylistic、styleset、character-variant、swash、ornament、annotation）の場合、 font-variant-alternates プロパティで人間が読める名前を参照することで、関連する関数を適用することができます。

これにより、特定のフォントが字体を制御するために使っている特定のインデックス値を知らなくても、 CSS ルールで代替字体を有効にすることができます。

フォントOpenType

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`font-variant-alternates`	111	111	34	9.1	111	9.3
DOM API
`CSSFontFeatureValuesMap` 実験的 CSS オブジェクトモデル (CSSOM) の CSSFontFeatureValuesMap インターフェイスは、スワッシュ、注釈、装飾などの CSSFontFeatureValuesRule プロパティの反復可能で読み取り専用のセットを表します。	111	111			111
`@@iterator` 実験的	111	111			111
`clear` 実験的 CSSFontFeatureValuesMap インターフェースの clear() メソッドは、CSSFontFeatureValuesMap 内のすべての宣言を削除します。	111	111			111
`delete` 実験的 CSSFontFeatureValuesMap インターフェースの delete() メソッドは、CSSFontFeatureValuesMap 内の指定されたプロパティを持つ CSS 宣言を削除します。	111	111			111
`entries` 実験的 CSSFontFeatureValuesMap インスタンスの events() メソッドは、この CSSFontFeatureValuesMap の各宣言の [キー、値] ペアを挿入順に含む新しいマップ反復子オブジェクトを返します。	111	111			111
`forEach` 実験的 CSSFontFeatureValuesMap インスタンスの forEach() メソッドは、このマップ内のキーと値のペアごとに、提供された関数を挿入順に 1 回実行します。	111	111			111
`get` 実験的 CSSFontFeatureValuesMap インターフェースの get() メソッドは、この CSSFontFeatureValuesMap のキーに対応する値を返します。値がない場合は unknown を返します。	111	111			111
`has` 実験的 CSSFontFeatureValuesMap インターフェースの has() メソッドは、指定されたキーを持つエントリがこの CSSFontFeatureValuesMap に存在するかどうかを示すブール値を返します。	111	111			111
`keys` 実験的 CSSFontFeatureValuesMap インスタンスのkeys() メソッドは、この CSSFontFeatureValuesMap の各宣言の [key, value] ペアを挿入順に含む新しいマップ反復子オブジェクトを返します。	111	111			111
`set` 実験的 CSSFontFeatureValuesMap インスタンスの set() メソッドは、指定されたキーと値を持つ新しいエントリをこの CSSFontFeatureValuesMap に追加するか、キーがすでに存在する場合は既存のエントリを更新します。	111	111			111
`size` 実験的 CSSFontFeatureValuesMap インターフェイスのサイズ読み取り専用プロパティは、CSSFontFeatureValuesMap オブジェクトのサイズを含む正の整数を返します。	111	111			111
`values` 実験的 CSSFontFeatureValuesMap インスタンスのvalues() メソッドは、この CSSFontFeatureValuesMap の各宣言の [key, value] ペアを挿入順に含む新しいマップ反復子オブジェクトを返します。	111	111			111
`CSSFontFeatureValuesRule` CSSFontFeatureValuesRule インターフェイスは @font-feature-values アットルールを表し、開発者が開発者が各フォントフェイスに対して、 font-variant-alternates で使用する機能インデックスを指定するための共通の名前を割り当てることができます。	134	134	34	16.2	134	16.2
`annotation` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用アノテーションプロパティには、font-variant-alternates をサポートする可変フォントのユーザー定義 ID と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
`characterVariant` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用のcharacterVariant プロパティには、font-variant-alternates をサポートする可変フォントのユーザー定義 ID と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
`fontFamily` fontFamily は CSSConditionRule インターフェイスのプロパティで、適用するフォントファミリーの名前を表します。	111	111	34	16.2	111	16.2
`ornaments` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用装飾プロパティには、font-variant-alternates をサポートする可変フォントのユーザー定義 ID と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
`styleset` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用 styleset プロパティには、font-variant-alternates をサポートする可変フォントのユーザー定義 ID と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
`stylistic` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用スタイルプロパティには、font-variant-alternates をサポートする可変フォントのユーザー定義 ID と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
`swash` 実験的 CSSFontFeatureValuesRule インターフェースの読み取り専用のスワッシュプロパティには、font-variant-alternates をサポートする可変フォントの開発者指定の名前と機能インデックスを表す CSSFontFeatureValuesMap オブジェクトが含まれています。	111	111			111
その他
`css.at-rules.font-feature-values` @font-feature-values は CSS のアットルールで、font-variant-alternates プロパティで共通の名前を使用して、OpenType で様々な特性を有効化することができます。これは、複数のフォントを使用している場合に CSS を簡素化するのに役立ちます。	111	111	34	9.1	111	9.3
CSS @ ルール
`annotation` `@アノテーション`	111	111	34	9.1	111	9.3
`character-variant` `@character-variant`	111	111	34	9.1	111	9.3
`historical-forms` `@historyal-forms`	111	111	34	9.1	111	9.3
`ornaments` `@ornaments`	111	111	34	9.1	111	9.3
`styleset` `@styleset`	111	111	34	9.1	111	9.3
`stylistic` `@文体`	111	111	34	9.1	111	9.3
`swash` `@スワッシュ`	111	111	34	9.1	111	9.3
CSS プロパティ
`annotation` `アノテーション()`	111	111	34	16.2	111	16.2
`character variant` `文字バリアント()`	111	111	34	16.2	111	16.2
`historical-forms`	111	111	34	9.1	111	9.3
`normal`	111	111	34	9.1	111	9.3
`ornaments` `装飾品()`	111	111	34	16.2	111	16.2
`styleset` `スタイルセット()`	111	111	34	16.2	111	16.2
`stylistic` `文体()`	111	111	34	16.2	111	16.2
`swash` `スワッシュ()`	111	111	34	16.2	111	16.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

@font-feature-values "MyFont" {
  @styleset {
    fancy: 1;
  }
  @swash {
    elegant: 1;
  }
}

.decorative {
  font-family: "MyFont";
  font-variant-alternates: styleset(fancy) swash(elegant);
}

ライブデモ

Normalglyph

font-variant-alternates Normalglyph demo.

プレビュー全画面表示

alternativeglyphconcept

font-variant-alternates alternativeglyphconcept demo.

プレビュー全画面表示

swashconcept

font-variant-alternates swashconcept demo.

プレビュー全画面表示

実務での使いどころ

装飾的な見出し

見出しやロゴにスワッシュや装飾的な異体字を適用し、高級感のあるデザインを演出する。

注意点

フォント自体が代替グリフを持っていない場合は効果がない。
@font-feature-values の定義は使用するフォントごとに必要。

対応ブラウザ

基本構文

ライブデモ

Normalglyph

alternativeglyphconcept

swashconcept

実務での使いどころ

装飾的な見出し

注意点

アクセシビリティ

参考リンク