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

font-synthesis-small-caps

スモールキャップス（小型大文字）がフォントに含まれていない場合のブラウザの合成動作を制御するプロパティです。合成スモールキャップスは単に大文字を縮小したものであり、本来のスモールキャップスグリフとは字形が異なります。高品質なタイポグラフィが求められる場面では合成を無効にすることを推奨します。

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

概要

スモールキャップス（小型大文字）がフォントに含まれていない場合のブラウザの合成動作を制御するプロパティです。合成スモールキャップスは単に大文字を縮小したものであり、本来のスモールキャップスグリフとは字形が異なります。高品質なタイポグラフィが求められる場面では合成を無効にすることを推奨します。

対応ブラウザ

デスクトップ

Chrome 97+
Edge 97+
Safari 16.4+
Firefox 111+

モバイル

Chrome Android 97+
Safari iOS 16.4+
Firefox Android 111+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク