タイポグラフィ（デザイン）
font-variant-numeric
数字の表記
| value （一例） | description |
|---|---|
tabular-nums | 数字を同じ幅で表示する |
normal | 標準表示 |
Demo
（閲覧環境によっては違いが生じない場合があります）
3.1415
3.1415
<p>3.1415</p>
<p class="tabular">3.1415</p>
.tabular {
font-variant-numeric: tabular-nums;
}
概要
数字（3.14）や分数（1/2）、序数（1st）の表示形式を指定します。
フォントによっては、数字の幅が一定でないものがあります。例えば1は横幅が小さくデザインされていたり、5は横幅が大きくデザインされていたりします。
通常は問題ありませんが、カウントダウンタイマーのように数字が変化していく場合、00:01と00:05では横幅が異なり見栄えが悪くなります。
このような場合にfont-variant-numeric:tabular-nums;を指定し、どの数字も同じ幅で表示する対策を行います。
よく利用する値
筆者はtabular-numsしか使ったことがありません。それもたまにですので利用ケースは少ないでしょう。