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>