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

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
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;
}

ライブデモ

合成あり(auto)

CSS の 合成あり(auto) パターンです。

プレビュー全画面表示

合成なし(none)

CSS の 合成なし(none) パターンです。

プレビュー全画面表示

比較表示

CSS の 比較表示 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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