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 ⁨январь 2020 г.⁩.

Summary

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

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

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: normalfont-variant-numeric: ordinalfont-variant-numeric: slashed-zerofont-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-fractionsfont-variant-numeric: initialfont-variant-numeric: inheritfont-variant-numeric: unset

Values

normal

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

ordinal

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

slashed-zero

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

<numeric-figure-values>

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

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

<numeric-spacing-values>

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

proportional-nums включает цифры разной ширины. Это соответствует значению OpenTypepnum.
tabular-nums включает цифры одинаковой ширины, которые легко выравниваются, как в таблицах. Это соответствуют значению OpenTypetnum.

<numeric-fraction-values>

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

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