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 valuenormal
  • Applies toAll elements
  • InheritedYes
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript syntaxobject.style.fontVariantNumeric
Formal syntax: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] 

font-variant-numeric: [value];
  • 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).
.class {
   font-variant-numeric: oldstyle-nums diagonal-fractions;
}
?Firefox?Explorer?Chrome?Safari?Opera


Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.