我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
Summary
The font-variant-numeric
CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
font-variant-numeric: normal; font-variant-numeric: ordinal; font-variant-numeric: slashed-zero; font-variant-numeric: lining-nums; /* <numeric-figure-values> */ font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */ font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */ font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* Global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset;
Values
normal
- This keyword leads to the deactivation of the use of such alternate glyphs.
ordinal
- This keyword forces the use of special glyphs for the ordinal markers, like 1st, 2nd, 3rd, 4th in English or a 1a in Italian. It corresponds to the OpenType values
ordn
. slashed-zero
- This keyword forces the use of a 0 with a slash; this is useful when a clear distinction between O and 0 is needed. It corresponds to the OpenType values
zero
. - <numeric-figure-values>
- These values controls the figures used for numbers. Two values are possible:
lining-nums
activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType valueslnum
.oldstyle-nums
activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType valuesonum
.
- <numeric-spacing-values>
- These values controls the sizing of figures used for numbers. Two values are possible:
proportional-nums
activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType valuespnum
.tabular-nums
activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in tables. It corresponds to the OpenType valuestnum
.
- <numeric-fraction-values>
- These values controls the glyphs used to display fractions. Two values are possible:
diagonal-fractions
activating the set of figures where the numerator and denominator are made smaller and separated by a slash. It corresponds to the OpenType valuesfrac
.stacked-fractions
activating the set of figures where the numerator and denominator are made smaller, stacked and separated by a horizontal line. It corresponds to the OpenType valuesafrc
.
Formal syntax
normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]where
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
Examples
p { font-variant-numeric: ordinal; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-numeric' in that specification. |
Candidate Recommendation | Initial definition |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 52.0 | 34 (34) [1] | ? | 39 | (Yes) |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 52.0 | 34.0 (34)[1] | ? | 39 | ? | 52.0 |
[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled
defaulting to true
on Nightly and Aurora only.