フォント
font-variant-numeric
font-variant-numeric は、数字の字形を切り替えます。桁が縦にそろう同じ幅の数字や、「3/4」を 1 文字の分数にする字形などを、フォントが持っているものの中から選びます。
構文normal …
normal
| [ <numeric-figure-values>
|| <numeric-spacing-values>
|| <numeric-fraction-values>
|| ordinal || slashed-zero ]プレビュー
1,111.10
8,888.00
3/4 · 1st
8,888.00
3/4 · 1st
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
font-family: Inter, sans-serif;
font-size: 16px;
font-variant-numeric: tabular-nums diagonal-fractions;
}コントロール
font-variant-numerictabular-nums diagonal-fractions
数字の高さ
数字の幅
分数
ordinal見本のフォント（Inter）にこの字形が無いので、プレビューは変わりません
slashed-zero見本のフォント（Inter）にこの字形が無いので、プレビューは変わりません
1,111.10
8,888.00
3/4 · 1st
8,888.00
3/4 · 1st
解説
値の書き方
初期値の normal はフォントの標準の字形のままです。そのほかは、次の組から 1 つずつ、いくつでも空白で区切って並べられます。順番は問いません。
- 数字の高さ：
lining-numsは大文字と同じ高さにそろえます。oldstyle-numsは小文字のように、6 や 8 は上に、3 や 9 は下にはみ出す数字です。文章の中で数字が目立ちすぎません。 - 数字の幅：
proportional-numsは 1 が狭いなど字ごとに幅が違い、tabular-numsはすべて同じ幅です。表の金額やタイマーのように、桁を縦にそろえたり、値が変わっても幅が揺れないようにしたりするときに使います。 - 分数：
diagonal-fractionsは「1/2」を斜線の分数に、stacked-fractionsは横線で上下に重ねた分数にします。 ordinal：「1st」の「st」のような序数の文字を小さく上に付けます。slashed-zero：0 に斜線を入れて、英字の O と見分けやすくします。
フォントが字形を持っているときだけ効く
どの値も、フォントに入っている OpenType の機能（tnum・frac など）を使うだけなので、フォントにその字形が無ければ何も変わりません。このページのプレビューは、どの環境でも同じように見えるように、Google Fonts の Inter を使っています。この Inter には oldstyle-nums・stacked-fractions・ordinal・slashed-zero の字形が入っていないので、選んでも見た目は変わりません。また、Inter の数字はもともと大文字と同じ高さで字ごとに幅が違うので、lining-nums と proportional-nums も normal と同じ見た目です。
分数の字形は、フォントによっては斜線の前後だけでなく、すべての数字を小さくしてしまいます。diagonal-fractions は分数を囲んだ要素にだけ書くと安全です。