font-variant
OpenTypeフォントの多彩なバリエーション機能を一括制御するショートハンドプロパティです。リガチャ、スモールキャップス、数字スタイル、東アジア字形など、高品質なタイポグラフィに必要な設定をまとめて指定できます。font-variant-alternates、font-variant-caps等の個別プロパティの値を組み合わせて使用します。
概要
OpenTypeフォントの多彩なバリエーション機能を一括制御するショートハンドプロパティです。リガチャ、スモールキャップス、数字スタイル、東アジア字形など、高品質なタイポグラフィに必要な設定をまとめて指定できます。font-variant-alternates、font-variant-caps等の個別プロパティの値を組み合わせて使用します。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
.elegant-text {
font-variant: small-caps;
}
.number-table {
font-variant: tabular-nums lining-nums;
}実務での使いどころ
-
OpenType機能を活用した洗練されたテキスト
見出しにスモールキャップス、本文に適切なリガチャ設定を適用し、プロフェッショナルなタイポグラフィを実現します。
注意点
- font-variantショートハンドは省略されたサブプロパティを初期値にリセットするため、個別プロパティで設定した値が失われる可能性があります。
アクセシビリティ
- フォントバリエーションは視覚的な表現を変更するものであり、テキストの意味やスクリーンリーダーの読み上げには影響しません。