font-variant-numeric property
Author admin Reading 2 min Views 406 Published by Modified by
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
01 | .amount { font-variant-numeric: oldstyle-nums diagonal-fractions; } |
02 | <h4>Steak marinade:</h4> |
04 | <li><span class="amount">2</span> tbsp olive oil</li> |
05 | <li><span class="amount">1</span> tbsp lemon juice</li> |
06 | <li><span class="amount">1</span> tbsp soy sauce</li> |
07 | <li><span class="amount">1 1/2</span> tbsp dry minced onion</li> |
08 | <li><span class="amount">2 1/2</span> tsp italian seasoning</li> |
09 | <li>Salt & pepper</li> |
