【30-4】数字の表示方法を指定する font-variant-numeric

font-variant-numericプロパティで「数」を表す文字の表示を指定できます。
「numeric（ヌュメリック）」は「数値」と言う意味だそうです。

ライニング数字（上下のラインが揃った普通の数字）とオールドスタイル（数字によって上下のラインが揃ってない昔風のやつ）を切り替えたり、分数を斜線や水平線で表示したり、序数詞（1st や 2nd の st や nd のこと）を上付き文字で表示したりできます。

このプロパティは、IE・Edge 以外のブラウザは対応しているようです。（2018年5月記）
IE・Edge は font-feature-settingsプロパティを使えば表示できます。
（font-feature-settingsプロパティについては、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant-numeric - CSS | MDN

font-variant-numericプロパティの値

font-variant-numericプロパティの値
キーワード	normal：デフォルト値。数字の表示に以下のものを使わない。 lining-nums、oldstyle-nums、proportional-nums、tabular-nums、diagonal-fractions、stacked-fractions、ordinal、slashed-zero
グローバル値	font-variant-numeric: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant-numeric: initial; 継承した親の値を解消しデフォルト値に戻す font-variant-numeric: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

それぞれのキーワードは、以下の意味があります。
＊キーワードの後の（）内は OpenType機能タグ値（feature-tag-value）です。
（OpenType機能タグ値については、【31】OpenType機能を直接指定できる font-feature-settingsプロパティをご覧ください）

normal

通常の表示。数字の表示に 以下↓の OpenType機能を使わない。

lining-nums（lnum）

数字をライニング数字で表示。
ライニング数字とは、数字の上下のラインが揃っている数字です。

oldstyle-nums（onum）

数字をオールドスタイル数字で表示。
オールドスタイル数字とは、数字ののラインが揃っていない、古典的な数字です。

proportional-nums（pnum）

数字をプロポーショナル数字で表示。
プロポーショナル数字とは、数字のフォルムによって文字幅が違っているもの。並べた時に字間が空いたり詰まったりしないように作られた数字です。

tabular-nums（tnum）

数字を等幅で表示。

diagonal-fractions（frac）

分数をスラッシュで表示。

stacked-fractions（afrc）

分数を水平線で表示。

ordinal（ordn）

序数詞を上付き文字で表示。
序数とは順番を表す数値で、日付・世紀・世代などで使われます。

slashed-zero（zero）

ゼロをスラッシュ付きのゼロで表示。
スラッシュ付きのゼロは「O（オー）」と読み違え無いように作られた字形。

font-variant-numericプロパティの使い方

font-variant-numericプロパティは、前回の font-variant-ligaturesプロパティと同じで、OpenTypeフォントに 該当するフォルムが含まれていなければ表示しません。

サンプルでのフォントは Garamond ですが「font-variant-numeric: stacked-fractions（水平線の分数）」以外は表示できました。
（クリックで 別ページでサンプルが開きます）

サンプルページにも貼ってありますが、HTMLはこちら。

<div class="sample">
  <p class="fvn-normal">0123456789<span>(normal)</span></p>
  <p class="fvn-lining">0123456789<span>(lining-nums)</span></p>
  <p class="fvn-oldstyle">0123456789<span>(oldstyle-nums)</span></p>
  <p class="fvn-proportional">0123456789<span>(proportional-nums)</span></p>
  <p class="fvn-tabular">0123456789<span>(tabular-nums)</span></p>
  <p class="fvn-diagonal">1/3, 8/9, 5/12<span>(diagonal-fractions)</span></p>
  <p class="fvn-stacked">1/3, 8/9, 5/12<span>(stacked-fractions)</span></p>
  <p class="fvn-ordinal">1st 2nd 3rd 17th<span>(ordinal)</span></p>
  <p class="fvn-slashed-z">100 5000<span>(slashed-zero)</span></p>
</div>

CSSはこちら

@font-face {
	font-family: AGara;
	src: url('AGaramondPro-Regular.otf') format("opentype");
    }
.sample {
	font-family:AGara;
	font-size:4rem;
	line-height:1.2
	}
.fvn-normal {
	font-variant-numeric: normal}
.fvn-lining {
	font-variant-numeric: lining-nums}
.fvn-oldstyle {
	font-variant-numeric: oldstyle-nums}
.fvn-proportional {
	font-variant-numeric: proportional-nums}
.fvn-tabular {
	font-variant-numeric: tabular-nums}
.fvn-diagonal {
	font-variant-numeric: diagonal-fractions}
.fvn-stacked {
	font-variant-numeric: stacked-fractions}
.fvn-ordinal {
	font-variant-numeric: ordinal}
.fvn-slashed-z {
	font-variant-numeric: slashed-zero}
.sample p span {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size:15px;
	color:#579961;
	margin-left:.5em;
	font-variant-ligatures: none;
	letter-spacing:normal
	}

次回予告

次回は font-variant-alternatesプロパティを見てみます。
「alternates（オルタネイト）」は「代替え」と言う意味。使用しているフォントが複数の代替え字形を持っていたら、それに置き換えることができます。