CSS - font-variant-numeric
概要
| 属性名 | font-variant-numeric |
|---|---|
| 値 | normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fiaction-values> || ordinal || slashed-zero ] |
| 値の詳細 |
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fiaction-values> = [ diagonal-fractions | stacked-fractions ]
|
| 初期値 | normal |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| メディア | Visual |
| サポート | https://caniuse.com/font-variant-numeric |
説明
| 値 | 説明 |
|---|---|
| normal | 通常表示します。 |
| lining-nums | 数字をライニング字形で表示します。 |
| oldstyle-nums | 数字をオールドスタイル字形で表示します。 |
| proportional-nums | 数字をプロポーショナル字形で表示します。 |
| tabular-nums | 数字をタビュラ字形で表示します。 |
| diagonal-nums | 分数をスラッシュ形式で表示します。 |
| stacked-nums | 分数を重ね形式で表示します。 |
| ordinal | 1st 2nd 3rd の st nd rd などを上付き小文字で表示します。 |
| slashed-zero | ゼロ(0)をスラッシュ付きのフォントで表示します。 |
使用例
HTML
<div style="font-family:'Helvetica'; font-size:16pt;"> <div style="font-variant-numeric:lining-nums">0123456789 liining-nums</div> <div style="font-variant-numeric:oldstyle-nums">0123456789 oldstyle-nums</div> <div style="font-variant-numeric:proportional-nums">0123456789 proportional-nums</div> <div style="font-variant-numeric:tabular-nums">0123456789 tabular-nums</div> </div> <div style="font-family:'Meiryo UI'; font-size:16pt;"> <div style="font-variant-numeric:slashed-zero">0 stacked-nums</div> </div>
表示
0123456789 liining-nums
0123456789 oldstyle-nums
0123456789 proportional-nums
0123456789 tabular-nums
0 stacked-nums
関連項目
font-variant, font-feature-settingsリンク
- http://www.w3.org/TR/css-fonts-3/#font-variant-numeric-prop
- https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-numeric
Copyright (C) 2015 杜甫々
初版：2015年11月15日、最終更新：2015年11月15日
https://www.tohoho-web.com/css/prop/font-variant-numeric.htm