font-variant-numeric

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Свойство font-variant-numeric 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;

/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Это свойство может принимать одну из двух форм:

или ключевое значение normal
или одно или несколько других значений, перечисленных ниже, разделенных пробелом в любом порядке.

Значения

normal

Это ключевое слово приводит к отключению использования таких альтернативных глифов.

ordinal

Это ключевое слово принудительно использует специальные глифы для порядковых маркеров, таких как 1-й, 2-й, 3-й, 4-й на английском языке или 1а на итальянском. Соответствует значениям OpenType ordn.

slashed-zero

Это ключевое слово принудительно использует 0 с косой чертой; это полезно, когда необходимо четко различать 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.

Формальное определение

Начальное значение	`normal`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

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

Примеры

Указание порядковых числовых форм

Нажмите «Запустить» в приведенных ниже блоках кода, чтобы изменить пример в MDN Playground:

<p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p>

@font-face {
  font-family: "Source Sans Pro";
  src: url("https://mdn.github.io/shared-assets/fonts/SourceSansPro-Regular.otf")
    format("opentype");
  font-weight: 400;
  font-style: normal;
}

.ordinal {
  font-family: "Source Sans Pro";
  font-size: 2rem;
  font-variant-numeric: ordinal;
}

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

Спецификация
CSS Fonts Module Level 4 # font-variant-numeric-prop

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-variant-numeric`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`diagonal-fractions`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`lining-nums`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`normal`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`oldstyle-nums`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`ordinal`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`proportional-nums`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`slashed-zero`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`stacked-fractions`	52	79	34	39	9.1	52	34	41	9.3	6.0	52
`tabular-nums`	52	79	34	39	9.1	52	34	41	9.3	6.0	52

END_OF_DOCUMENT_MARKER

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric