font-variant-caps
大文字の表示スタイルを制御するプロパティで、small-caps（小型大文字）やall-small-caps（全文字小型大文字）、petite-caps（さらに小さい大文字）、titling-caps（タイトル用大文字）などを指定できます。text-transformとは異なり、OpenTypeフォントの専用グリフを使用するため、文字の太さやプロポーションが最適化されます。
概要
大文字の表示スタイルを制御するプロパティで、small-caps（小型大文字）やall-small-caps（全文字小型大文字）、petite-caps（さらに小さい大文字）、titling-caps（タイトル用大文字）などを指定できます。text-transformとは異なり、OpenTypeフォントの専用グリフを使用するため、文字の太さやプロポーションが最適化されます。
対応ブラウザ
デスクトップ
Chrome 52+
Edge 79+
Safari 9.1+
Firefox 34+
モバイル
Chrome Android 52+
Safari iOS 9.3+
Firefox Android 34+
基本構文
CSS
.small-caps {
font-variant-caps: small-caps;
}
.all-small {
font-variant-caps: all-small-caps;
}
.title { font-variant-caps: titling-caps; }実務での使いどころ
-
法律文書や学術論文の略語表示
略語やアクロニムにsmall-capsを適用し、本文テキスト内で大文字が目立ちすぎず自然に馴染むよう表示します。
注意点
- 使用するフォントにスモールキャップスグリフが含まれていない場合、ブラウザが合成で代用するため品質が低下します。font-synthesis-small-capsで制御できます。
アクセシビリティ
- スモールキャップス表示はスクリーンリーダーの読み上げに影響しません。視覚的なスタイルのみの変更です。