font-variant-position
OpenTypeフォントに含まれる専用の上付き・下付きグリフを使用するプロパティです。HTML の<sub>/<sup>要素によるフォントサイズ縮小・位置調整と異なり、フォントデザイナーが設計した専用グリフを使用するため、より美しい表示になります。数式や化学式など正確な表記が求められる場面に適しています。
概要
OpenTypeフォントに含まれる専用の上付き・下付きグリフを使用するプロパティです。HTML の<sub>/<sup>要素によるフォントサイズ縮小・位置調整と異なり、フォントデザイナーが設計した専用グリフを使用するため、より美しい表示になります。数式や化学式など正確な表記が求められる場面に適しています。
対応ブラウザ
デスクトップ
Chrome 未対応
Edge 未対応
Safari 未対応
Firefox 34+
モバイル
Chrome Android 未対応
Safari iOS 未対応
Firefox Android 34+
基本構文
CSS
.superscript {
font-variant-position: super;
}
.subscript {
font-variant-position: sub;
}実務での使いどころ
-
数式の高品質な上付き表示
数学的な表記でOpenTypeフォントの上付きグリフを使用し、x²やeⁿなどを高品質に表示します。
注意点
- Firefox以外では未対応のため、sup/sub要素による従来のスタイリングをフォールバックとして維持してください。
アクセシビリティ
- 上付き・下付きの情報はセマンティックHTML（sup/sub）で伝え、font-variant-positionは視覚的な品質向上のみに使用してください。