CSS font-variant-numeric Property

Description

The font-variant-numeric property specifies control over numerical forms. Within normal paragraph text, proportional numbers are used while tabular numbers are used so that columns of numbers line up properly

Initial value

normal

Applies to

All elements

Inherited

Yes

Media

Visual

Computed value

As specified

Animatable

No

CSS Version

CSS3

JavaScript syntax

object.style.fontVariantNumeric

Syntax

font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] 

Values

• normalNone of the features listed below are enabled.
• <numeric-figure-values> = [ lining-nums | oldstyle-nums ]lining-nums - Enables display of lining numerals (OpenType feature: lnum).
  oldstyle-nums - Enables display of old-style numerals (OpenType feature: onum).
• <numeric-spacing-values> = [ proportional-nums | tabular-nums ]proportional-nums - Enables display of proportional numerals (OpenType feature: pnum).
  tabular-nums - Enables display of tabular numerals (OpenType feature: tnum).
• <numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]diagonal-fractions - Enables display of lining diagonal fractions (OpenType feature: frac).
  stacked-fractions - Enables display of lining stacked fractions (OpenType feature: afrc).
• ordinalEnables display of letter forms used with ordinal numbers (OpenType feature: ordn).
• slashed-zeroEnables display of slashed zeros (OpenType feature: zero).

Example

.class {
   font-variant-numeric: oldstyle-nums diagonal-fractions;
}

Browser Support

Desktop
X	79	52	34	39	9.1
Tablets / Mobile
52	52	34	41	9.3	6.0

Last updated by CSSPortal on: