font-variant-numeric property CSS Reference



Definition and Usage

Specifies control over numerical forms.

  • <numeric-figure-values> = [ lining-nums | oldstyle-nums ]
  • <numeric-spacing-values> = [ proportional-nums | tabular-nums ]
  • <numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
Name: font-variant-numeric
Value: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified

Syntax

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

Values

normal
None of the features listed below are enabled.
lining-nums
Enables display of lining numerals (OpenType feature: lnum).
oldstyle-nums
Enables display of old-style numerals (OpenType feature: onum).
proportional-nums
Enables display of proportional numerals (OpenType feature: pnum).
tabular-nums
Enables display of tabular numerals (OpenType feature: tnum).
diagonal-fractions
Enables display of lining diagonal fractions (OpenType feature: frac).
stacked-fractions
Enables display of lining stacked fractions (OpenType feature: afrc).
ordinal
Enables display of forms used with ordinal numbers (OpenType feature: ordn).
slashed-zero
Enables display of slashed zeros (OpenType feature: zero).

Examples

.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }
<h4>Steak marinade:</h4>
<ul>
<li><span class="amount">2</span> tbsp olive oil</li>
<li><span class="amount">1</span> tbsp lemon juice</li>
<li><span class="amount">1</span> tbsp soy sauce</li>
<li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
<li><span class="amount">2 1/2</span> tsp italian seasoning</li>
<li>Salt &amp; pepper</li>
</ul>

Relative articles