font-variant-numeric

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Summary

Свойство CSS font-variant-numeric управляет использованием альтернативных начертаний для цифр, дробей и порядковых числительных.

Начальное значениеnormal
Применяется кall elements and text. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Обработка значениякак указано
Animation typediscrete

Syntax

Formal syntax:

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

<numeric-figure-values> =
lining-nums |
oldstyle-nums

<numeric-spacing-values> =
proportional-nums |
tabular-nums

<numeric-fraction-values> =
diagonal-fractions |
stacked-fractions

css
font-variant-numeric: normal
font-variant-numeric: ordinal
font-variant-numeric: slashed-zero
font-variant-numeric: lining-nums         /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums       /* <numeric-figure-values> */
font-variant-numeric: proportional-nums   /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums        /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions  /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions   /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions

font-variant-numeric: initial
font-variant-numeric: inherit
font-variant-numeric: unset

Values

normal

Это ключевое слово отключает все альтернативные начертания.

ordinal

Это ключевое слово включает специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском или 1a в итальянском (в русском такие типографские изыски не приняты, пишут просто «1-й»). Это соответствует значению OpenType ordn.

slashed-zero

Это ключевое слово включает перечёркнутый ноль; это полезно, когда нужно чёткое различие между буквой O и цифрой 0. Это соответствует значению OpenType zero.

<numeric-figure-values>

Эти значения управляют тем, какими знаками будут отображаться цифры. Возможны два значения:

  • lining-nums включает маюскульные («заглавные») цифры, стоящие на опорной линии текста. Это соответствует значению OpenType lnum.
  • oldstyle-nums включает минускульные («строчные») цифры, в которых некоторые знаки (3, 4, 7, 9) уходят нижним краем под опорную линию (в русской типографике не принято, зато широко используется в западной, в основном в шрифтах с засечками). Это соответствует значению OpenType onum.
<numeric-spacing-values>

Эти значения управляют горизонтальным размером цифр. Возможны два значения:

  • proportional-nums включает цифры разной ширины. Это соответствует значению OpenType pnum.
  • tabular-nums включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenType tnum.
<numeric-fraction-values>

Эти значения управляют отображением дробей. Возможны два значения:

  • diagonal-fractions включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой. Это соответствует значению OpenType frac.
  • stacked-fractions включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой. Это соответствует значению OpenType afrc.

Examples

css
p {
  font-variant-numeric: ordinal;
}

Спецификации

Specification
CSS Fonts Module Level 4
# font-variant-numeric-prop

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant-numeric
diagonal-fractions
lining-nums
normal
oldstyle-nums
ordinal
proportional-nums
slashed-zero
stacked-fractions
tabular-nums

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также