文字與排版

字型數字變體font-variant-numeric

Controlling the usage of alternate glyphs for numbers, fractions, and ordinal markers.

Class	Declarations
`font-variant-numeric:normal`	`font-variant-numeric: normal;`
`ordinal`	`font-variant-numeric: ordinal;`
`slashed-zero`	`font-variant-numeric: slashed-zero;`
`lining-nums`	`font-variant-numeric: lining-nums;`
`oldstyle-nums`	`font-variant-numeric: oldstyle-nums;`
`proportional-nums`	`font-variant-numeric: proportional-nums;`
`tabular-nums`	`font-variant-numeric: tabular-nums;`
`diagonal-fractions`	`font-variant-numeric: diagonal-fractions;`
`stacked-fractions`	`font-variant-numeric: stacked-fractions;`
`font-variant-numeric:<value>`	`font-variant-numeric: <value>;`

Examples

Use tabular-nums for tables, timers, and dashboards where digits should line up across rows.

<td class="tabular-nums">12,480.00</td>

Generated CSS

@layer utilities {    .tabular-nums {        font-variant-numeric: tabular-nums    }}

Use slashed-zero when zeroes need to be visually distinct from the letter O.

<code class="slashed-zero">OID-00042</code>

Use font-variant-numeric:normal to remove numeric variant features from a nested element.

<span class="tabular-nums">    <span class="font-variant-numeric:normal">Normal numbers</span></span>

Apply styles based on different states using selectors and conditional queries.

<span class="tabular-nums:hover font-variant-numeric:normal@sm font-variant-numeric:normal@print">...</span>

Setting font style of an element.

Setting the weight of the font.