font-variant-numericとは
font-variant-numericは、フォントの数字の表現方法を指定するCSSプロパティです。
caniuseによるとすべてのモダンブラウザで利用可能です。
このプロパティを使用することで、フォントの数字のスタイルを変更できます。
font-variant-numericの使用方法
font-variant-numericは、normal、ordinal、slashed-zero、lining-nums、oldstyle-nums、proportional-nums、tabular-nums、diagonal-fractions、stacked-fractionsのいずれかの値を取ります。
例えば、以下のようにして使用します。
p {
font-variant-numeric: lining-nums;
}
この例では、段落内の数字がlining-numsで定義された表示に変更されます。
font-variant-numericの各値について
デフォルトのフォントでは表現がわかりにくいので、サンプルはSource Sans Proを利用しました。
-
normal: フォントのデフォルトの数字表現
See the Pen Untitled by KokiSakano (@kokisakano) on CodePen.
-
ordinal: フォントが持つ序数の表現
See the Pen slashed-zero by KokiSakano (@kokisakano) on CodePen.
-
slashed-zero: 0の上に斜線(フォントによっては射線とは違う形で表現される)
See the Pen Untitled by KokiSakano (@kokisakano) on CodePen.
-
lining-nums: 高さが揃った数値 -
oldstyle-nums: 高さがバラバラな周りの小文字のアルファベットに馴染む数値
See the Pen lining-nums by KokiSakano (@kokisakano) on CodePen.
-
proportional-nums: 数字の幅がバラバラ -
tabular-nums: 数字の幅が均等
See the Pen figure by KokiSakano (@kokisakano) on CodePen.
-
diagonal-fractions: 斜めで人まとまりの分数 -
stacked-fractions: 横に数値と射線を積み重ねた分数
See the Pen figure by KokiSakano (@kokisakano) on CodePen.