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

font-synthesis-small-caps

font-synthesis-small-caps は CSS プロパティで、フォントファミリーにスモールキャップの書体がない場合に、ブラウザーがスモールキャップの書体を合成するかどうかを指定します。スモールキャップの字体は通常、大文字の形状を使用しますが、小文字のサイズに縮小されます。

すべての書体合成値を制御するには、多くの場合は一括指定プロパティ font-synthesis を使用した方が便利です。

スモールキャップス合成品質制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-synthesis-small-caps
97
97
111
16.4
97
16.4
auto
97
97
111
16.4
97
16.4
none
97
97
111
16.4
97
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.no-synth-caps {
  font-variant-caps: small-caps;
  font-synthesis-small-caps: none;
}
.allow-synth {
  font-synthesis-small-caps: auto;
}

ライブデモ

composite with(auto)

CSS composite with(auto) demo.

プレビュー全画面表示

composite none(none)

CSS composite none(none) demo.

プレビュー全画面表示

Comparison view

CSS comparison view demo.

プレビュー全画面表示

実務での使いどころ

  • 高品質スモールキャップス表示

    書籍タイトルや見出しで合成スモールキャップスを無効にし、フォント本来のスモールキャップスグリフのみを使用します。

注意点

  • 合成を無効にすると、フォントにスモールキャップスグリフがない場合は通常の大文字で表示されます。

アクセシビリティ

  • スモールキャップスは視覚的な装飾であり、スクリーンリーダーの読み上げには影響しません。

参考リンク