font-variant-numericプロパティの説明
CSSの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プロパティの書き方を見ていきましょう。以下の例は、数字のゼロをスラッシュ付きの字体で表すかどうかを比較したものです。
<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_norm {
font-variant-numeric: normal;
}
.fvn_slas {
font-variant-numeric: slashed-zero;
}
分数はマークアップの時点でスラッシュ区切りの数字で記述しますが、画面に表示される形式をスラッシュ区切りにするか、水平線で上下に重ねて表示するのかを選べます。以下の例は、それを比較したものです。基本的に上下で区切る表記は、二桁以上の数字に対応していないようです。
<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>
.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;
}