font-variant-numeric
数字の表示スタイルをOpenTypeフォント機能で制御するプロパティです。tabular-nums（等幅数字）で列の数字を揃えたり、oldstyle-nums（オールドスタイル数字）で本文に馴染む数字表示にしたり、slashed-zero（スラッシュ付きゼロ）でOと0を区別したりできます。データテーブルやUI設計に不可欠です。
概要
数字の表示スタイルをOpenTypeフォント機能で制御するプロパティです。tabular-nums（等幅数字）で列の数字を揃えたり、oldstyle-nums（オールドスタイル数字）で本文に馴染む数字表示にしたり、slashed-zero（スラッシュ付きゼロ）でOと0を区別したりできます。データテーブルやUI設計に不可欠です。
対応ブラウザ
デスクトップ
Chrome 52+
Edge 79+
Safari 9.1+
Firefox 34+
モバイル
Chrome Android 52+
Safari iOS 9.3+
Firefox Android 34+
基本構文
CSS
.price {
font-variant-numeric: tabular-nums;
}
.body-text {
font-variant-numeric: oldstyle-nums;
}
.code-num { font-variant-numeric: slashed-zero; }実務での使いどころ
-
データテーブルの数値列揃え
テーブルの金額列にtabular-numsを適用して数字の幅を統一し、桁の揃った読みやすい数値表示を実現します。
注意点
- 使用するフォントがOpenType数字機能をサポートしている必要があります。サポートしていない場合は効果がありません。
アクセシビリティ
- 数字の表示スタイルの変更はスクリーンリーダーの読み上げに影響しないため、アクセシビリティ上の問題はありません。