font-variant-alternates
font-variant-alternates は、OpenType フォントに含まれる代替グリフ（stylistic alternates, swash, ornaments など）を有効にする。@font-feature-values ルールと組み合わせて、フォント固有の代替グリフに名前を付けて参照できる。
概要
font-variant-alternates は、OpenType フォントに含まれる代替グリフ（stylistic alternates, swash, ornaments など）を有効にする。@font-feature-values ルールと組み合わせて、フォント固有の代替グリフに名前を付けて参照できる。
対応ブラウザ
デスクトップ
Chrome 111+
Edge 111+
Safari 9.1+
Firefox 34+
モバイル
Chrome Android 111+
Safari iOS 9.3+
Firefox Android 34+
基本構文
CSS
@font-feature-values "MyFont" {
@styleset {
fancy: 1;
}
@swash {
elegant: 1;
}
}
.decorative {
font-family: "MyFont";
font-variant-alternates: styleset(fancy) swash(elegant);
}実務での使いどころ
-
装飾的な見出し
見出しやロゴにスワッシュや装飾的な異体字を適用し、高級感のあるデザインを演出する。
注意点
- フォント自体が代替グリフを持っていない場合は効果がない。
- @font-feature-values の定義は使用するフォントごとに必要。
アクセシビリティ
- 代替グリフは視覚的な変化のみで、テキストの意味やスクリーンリーダーの読み上げには影響しない。