CSS font-variant-numeric Property

❮ Previous Reference Next ❯

Example

p {
  font-variant-numeric: diagonal-fractions;
  font-family:sans-serif;
  font-weight:400;
  font-style:normal
}
Try this code ❯





0
2.55
9.66

Meaning:

The font-variant-numeric CSS property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.

Default value:normal
Inherited:Yes
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.fontVariantNumeric="normal|ordinal|slashed-zero|numeric-figure-values|numeric-spacing-values|numeric-fraction-values|initial|inherit|revert|revert-layer|unset";


Standard Syntax

font-variant-numeric: normal|ordinal|slashed-zero|numeric-figure-values|numeric-spacing-values|numeric-fraction-values|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
normal Defines to the deactivation of the use of such alternate glyphs.
ordinal 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 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 Control the figures used for numbers.

Possible values are:

  • lining-nums - activating the set of figures where numbers are all lying on the baseline. It corresponds to the OpenType values lnum.
  • oldstyle-nums - activating the set of figures where some numbers, like 3, 4, 7, 9 have descenders. It corresponds to the OpenType values onum.
numeric-spacing-values Controls the sizing of figures used for numbers.

Possible values are:

  • proportional-nums - activating the set of figures where numbers are not all of the same size. It corresponds to the OpenType values pnum.
  • 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 values tnum.
numeric-fraction-values Controls the glyphs used to display fractions.

Possible values are:

  • 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 values frac.
  • 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 values afrc.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  font-variant-numeric: normal;
}
❮ Previous Reference Next ❯