font-variant
font-variant は CSS の一括指定プロパティで、フォントのすべての変化形を設定することができます。
CSS Level 2.1 で定義された font-variant の <font-variant-css2> 値（つまり、 normal や small-caps）は、一括指定の font を用いて設定することもできます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| CSS @ ルール | ||||||
font-variant 非標準 | 4 | 12 | 3.5 | 3.1 | 18 | 2 |
| CSS プロパティ | ||||||
css fonts shorthand CSS フォント モジュール レベル 3 の短縮表現 | 52 | 79 | 34 | 9.1 | 52 | 9.3 |
greek accented characters ギリシャ語アクセント文字 | | | | | | |
historical-forms | 111 | 111 | 34 | 9.1 | 111 | 9.3 |
none | 52 | 79 | 34 | 9 | 52 | 9 |
normal | 1 | 12 | 1 | 1 | 18 | 1 |
sub | 110 | 110 | 34 | 9.1 | 110 | 9.3 |
super | 110 | 110 | 34 | 9.1 | 110 | 9.3 |
turkic is 「i」→「İ」および「ı」→「I」 | 31 | 12 | 14 | 8 | 31 | 8 |
uppercase eszett `ß` → `SS` | | | | | | |
| その他 | ||||||
| font-variant 属性は、フォントのグリフのバリエーションを使用してテキストをレンダリングするかどうかを示します。 | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、すべて大文字のギリシャ語テキストのアクセントが正しく省略される場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、すべて大文字のギリシャ語テキストのアクセントが正しく省略される場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、すべて大文字のギリシャ語テキストのアクセントが正しく省略される場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、すべて大文字のギリシャ語テキストのアクセントが正しく省略される場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、「ß」が「SS」として大文字になる場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、「ß」が「SS」として大文字になる場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、「ß」が「SS」として大文字になる場合があります。
注釈 1件
実装メモ
- 一部のオペレーティング システムでは、「ß」が「SS」として大文字になる場合があります。
基本構文
CSS
.elegant-text {
font-variant: small-caps;
}
.number-table {
font-variant: tabular-nums lining-nums;
}ライブデモ
実務での使いどころ
-
OpenType機能を活用した洗練されたテキスト
見出しにスモールキャップス、本文に適切なリガチャ設定を適用し、プロフェッショナルなタイポグラフィを実現します。
注意点
- font-variantショートハンドは省略されたサブプロパティを初期値にリセットするため、個別プロパティで設定した値が失われる可能性があります。
アクセシビリティ
- フォントバリエーションは視覚的な表現を変更するものであり、テキストの意味やスクリーンリーダーの読み上げには影響しません。