font-variant-numeric：数値に関する文字表記を制御する

font-variant-numericプロパティの説明

font-variant-numericは、数値に関する文字表記を制御します。例えば、アルファベットのOと数字の0を区別するためにスラッシュつきのゼロにしたり、分数の表記をスラッシュ区切りから水平線で上下に数字を積み重ねる表記に変更できます。

実際に表示される形式は指定されたフォントに依存します。font-variant-numericが正しく指定されていても、その表記に対応していないフォントでは通常通りの形式で表示されます。

font-variant-numericに指定できる値

normal

形式の変更を無効にします。これが初期値です。

ordinal

序数標識を特別な記号で表示します。英語では1st、2nd、3rdにあたるものです。OpenTypeのordnに対応します。

slashed-zero

数字のゼロにスラッシュ付きの字体を使用します。アルファベットのOと数字の0を区別したい場合に有効です。OpenTypeのzeroに対応します。

<numeric-figure-values>

数字の形状を制御する値です。これには以下のキーワードが用意されています。

• lining-nums：全ての数字をベースラインに揃えて表記します。OpenTypeのlnumに対応します。
• oldstyle-nums：いくつかの数字をベースラインより下げて表記します。OpenTypeのonumに対応します。

<numeric-spacing-values>

数字の大きさを制御する値です。これには以下のキーワードが用意されています。

• proportional-nums：数字によって大きさが変わる表記を有効にします。OpenTypeのpnumに対応します。
• tabular-nums：数字を全て同じ大きさで表記します。OpenTypeのtnumに対応します。

<numeric-fraction-values>

分数の表示を制御する値です。これには以下のキーワードが用意されています。

• diagonal-fractions：分子と分母を小さく表示し、スラッシュ区切りの表記を有効にします。OpenTypeのfracに対応します。
• stacked-fractions：分子と分母を小さく表示し、水平線で上下に分けた表記を有効にします。OpenTypeのafrcに対応します。

font-variant-numericの使い方とサンプル

font-variant-numericプロパティの構文は以下の通りです。

/* キーワード値 */
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;

/* <numeric-figure-values> */
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;

/* <numeric-spacing-values> */
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;

/* <numeric-fraction-values> */
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;

/* 複数の指定 */
font-variant-numeric: slashed-zero stacked-fractions;

/* グローバル値 */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: unset;

font-variant-numericの実例

それでは実際にfont-variant-numericプロパティの書き方を見ていきましょう。以下の例は、数字のゼロをスラッシュ付きの字体で表すかどうかを比較したものです。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
.fvn_norm {
	font-variant-numeric: normal;
}
.fvn_slas {
	font-variant-numeric: slashed-zero;
}

<section class="samp_box">
	<h2>font-variant-numeric</h2>
	<p class="fvn_norm">Zero 0 / normal</p>
	<p class="fvn_slas">Zero 0 / slashed-zero</p>
</section>

分数はマークアップの時点でスラッシュ区切りの数字で記述しますが、画面に表示される形式をスラッシュ区切りにするか、水平線で上下に重ねて表示するのかを選べます。以下の例は、それを比較したものです。基本的に上下で区切る表記は、二桁以上の数字に対応していないようです。

.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
.fvn_diag {
	font-variant-numeric: diagonal-fractions;
}
.fvn_stac {
	font-variant-numeric: stacked-fractions;
}

<section class="samp_box">
	<h2>font-variant-numeric</h2>
	<p class="fvn_diag">1/3 2/5 7/8 13/15 diagonal-fractions</p>
	<p class="fvn_stac">1/3 2/5 7/8 13/15 stacked-fractions</p>
</section>