MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Summary

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

Начальное значениеnormal
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокпорядок появления в формальной грамматике значений

Syntax

Formal syntax: 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 ]

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

p {
  font-variant-numeric: ordinal;
}

Specifications

Specification Status Comment
CSS Fonts Module Level 3
Определение 'font-variant-numeric' в этой спецификации.
Кандидат в рекомендации Initial definition

Browser Compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari (WebKit)
Basic support 34 (34) [1] ? ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 34.0 (34)[1] ? ? ?

[1] Experimental implementation was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled defaulting to true on Nightly and Aurora only.

See also

Метки документа и участники

 Внесли вклад в эту страницу: kalmukvitaly, Sebastianz, Mercury13
 Обновлялась последний раз: kalmukvitaly,