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

font-variant-numeric

font-variant-numeric は CSS のプロパティで、数字、分数、序数記号の表記を制御するために使用します。

数字スタイルテーブル数値

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-numeric
52
79
34
9.1
52
9.3
diagonal-fractions
52
79
34
9.1
52
9.3
lining-nums
52
79
34
9.1
52
9.3
normal
52
79
34
9.1
52
9.3
oldstyle-nums
52
79
34
9.1
52
9.3
ordinal
52
79
34
9.1
52
9.3
proportional-nums
52
79
34
9.1
52
9.3
slashed-zero
52
79
34
9.1
52
9.3
stacked-fractions
52
79
34
9.1
52
9.3
tabular-nums
52
79
34
9.1
52
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.price {
  font-variant-numeric: tabular-nums;
}
.body-text {
  font-variant-numeric: oldstyle-nums;
}
.code-num { font-variant-numeric: slashed-zero; }

ライブデモ

tabular-nums

CSS Tabular-nums demo.

プレビュー全画面表示

oldstyle-nums

CSS Oldstyle-nums demo.

プレビュー全画面表示

slashed-zero

CSS Slashed-zero demo.

プレビュー全画面表示

実務での使いどころ

  • データテーブルの数値列揃え

    テーブルの金額列にtabular-numsを適用して数字の幅を統一し、桁の揃った読みやすい数値表示を実現します。

注意点

  • 使用するフォントがOpenType数字機能をサポートしている必要があります。サポートしていない場合は効果がありません。

アクセシビリティ

  • 数字の表示スタイルの変更はスクリーンリーダーの読み上げに影響しないため、アクセシビリティ上の問題はありません。

参考リンク