Mit font-variant-numeric kann man steuern, wie Zahlen gerendert werden.
Beispiele:
- normal: 1234567890
- ordinal: 1st 2nd 3rd
- slashed-zero: 0 1 2 3
- lining-nums: 1234567890
- oldstyle-nums: 1234567890
- proportional-nums: 1234567890
- tabular-nums: 1234567890
- diagonal-fractions: 1/2 3/4 5/6
- stacked-fractions: 1/2 3/4 5/6
Code:
<ul>
<li>normal: <span style="font-variant-numeric: normal;">1234567890</span>
<li>ordinal: <span style="font-variant-numeric: ordinal;">1st 2nd 3rd</span>
<li>slashed-zero: <span style="font-variant-numeric: slashed-zero;">0 1 2 3</span>
<li>lining-nums: <span style="font-variant-numeric: lining-nums;">1234567890</span>
<li>oldstyle-nums: <span style="font-variant-numeric: oldstyle-nums;">1234567890</span>
<li>proportional-nums: <span style="font-variant-numeric: proportional-nums;">1234567890</span>
<li>tabular-nums: <span style="font-variant-numeric: tabular-nums;">1234567890</span>
<li>diagonal-fractions: <span style="font-variant-numeric: diagonal-fractions;">1/2 3/4 5/6</span>
<li>stacked-fractions: <span style="font-variant-numeric: stacked-fractions;">1/2 3/4 5/6</span>
</ul>tabular-nums kann man gut dafür verwenden, wenn man eine Nicht-Monospace-Font hat, aber die Zahlen an einer Stelle gleich breit haben muss. Das muss die Font natürlich unterstützen.
Mit font-variant-position kann man auch Texte in sub/sup setzen, ohne die HTML-Tags <sub>/<sup> zu verwenden.