Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。
タイポグラフィ Limited support

font-synthesis-position

フォントに上付き・下付きのグリフが含まれていない場合にブラウザが人工的にそれらを生成するかを制御します。合成された上付き・下付き文字は品質が低いことが多いため、代わりにfont-variant-positionを使用してOpenTypeの正確なグリフを利用することが推奨されます。

合成制御上付き下付き文字

概要

フォントに上付き・下付きのグリフが含まれていない場合にブラウザが人工的にそれらを生成するかを制御します。合成された上付き・下付き文字は品質が低いことが多いため、代わりにfont-variant-positionを使用してOpenTypeの正確なグリフを利用することが推奨されます。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 118+

モバイル

Chrome Android 未対応
Safari iOS 未対応
Firefox Android 118+

基本構文

CSS 
.precise-math {
  font-synthesis-position: none;
  font-variant-position: sub;
}
sup {
  font-synthesis-position: auto;
}

実務での使いどころ

  • 化学式の正確な下付き文字表示

    化学式の下付き数字で合成を無効にし、フォントに含まれる正確な下付きグリフを使用して品質の高い表示を実現します。

注意点

  • Firefox以外では未対応のため、フォールバックとして通常のsub/sup要素のスタイリングを用意してください。

アクセシビリティ

  • 上付き・下付き文字はsub/sup要素を使用してセマンティックに表現し、スクリーンリーダーが正しく読み上げられるようにしてください。

参考リンク