Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-variant-caps

font-variant-caps は CSS のプロパティで、スモールキャップやタイトルに使われる代替グリフの使用を制御します。

スモールキャップス大文字スタイル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-caps
52
79
34
9.1
52
9.3
all-petite-caps
52
79
34
9.1
52
9.3
all-small-caps
52
79
34
9.1
52
9.3
normal
52
79
34
9.1
52
9.3
petite-caps
52
79
34
9.1
52
9.3
small-caps
52
79
34
9.1
52
9.3
titling-caps
52
79
34
9.1
52
9.3
unicase
52
79
34
9.1
52
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.small-caps {
  font-variant-caps: small-caps;
}
.all-small {
  font-variant-caps: all-small-caps;
}
.title { font-variant-caps: titling-caps; }

ライブデモ

small-caps

CSS Small-caps demo.

プレビュー全画面表示

all-small-caps

CSS All-small-caps demo.

プレビュー全画面表示

titling-caps

CSS Titling-caps demo.

プレビュー全画面表示

実務での使いどころ

  • 法律文書や学術論文の略語表示

    略語やアクロニムにsmall-capsを適用し、本文テキスト内で大文字が目立ちすぎず自然に馴染むよう表示します。

注意点

  • 使用するフォントにスモールキャップスグリフが含まれていない場合、ブラウザが合成で代用するため品質が低下します。font-synthesis-small-capsで制御できます。

アクセシビリティ

  • スモールキャップス表示はスクリーンリーダーの読み上げに影響しません。視覚的なスタイルのみの変更です。

参考リンク