Свойство CSS font-variant-numeric
Свойство CSS font-variant-numeric управляет использованием альтернативных глифов для цифр, дробей и порядковых обозначений.
Свойство CSS font-variant-numeric управляет использованием альтернативных глифов для цифр, дробей и порядковых обозначений. Это удобное сокращение из семейства font-variant, которое открывает доступ к числовым функциям OpenType без необходимости использовать низкоуровневое свойство font-feature-settings.
На этой странице описывается, что делает каждое значение, когда следует его применять, особенности поддержки шрифтов и пример с возможностью запуска.
Зачем использовать
Числа можно отображать в нескольких стилях: порядковые (например, 1st), дроби (например, ½), выровненные и старостильные цифры, а также пропорциональное и табличное начертание. В отличие от букв, эти варианты не изменяют смысл текста, но добавляют контекст и влияют на удобочитаемость:
- Табличные цифры делают все цифры одинаковой ширины, чтобы числа выравнивались в таблицах и ценовых столбцах.
- Старостильные цифры имеют надстрочные и подстрочные элементы, которые органично вписываются в основной текст, не выделяясь, как заголовок.
- Перечёркнутый ноль устраняет неоднозначность между
0и буквойOв коде, идентификаторах и серийных номерах. - Диагональные дроби преобразуют
1/2в единый типографский символ ½.
Главное ограничение — поддержка шрифтов: функция работает только в том случае, если гарнитура содержит соответствующую таблицу OpenType. Большинство системных шрифтов поддерживают несколько возможностей (выровненные, табличные), однако diagonal-fractions, stacked-fractions и slashed-zero присутствуют в значительно меньшем числе гарнитур. Если шрифт не поддерживает функцию, значение молча игнорируется и отображаются глифы по умолчанию.
| Начальное значение | normal |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемо | Дискретно. |
| Версия | CSS3 |
| DOM Syntax | object.style.fontVariantNumeric = "slashed-zero"; |
Синтаксис
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];Значения figure, spacing, fraction, ordinal и slashed-zero можно комбинировать в одном объявлении, поскольку они управляют независимыми аспектами глифов:
/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;Пример
Пример свойства CSS font-variant-numeric со значениями oldstyle-nums и diagonal-fractions
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.p1 {
font-variant-numeric: oldstyle-nums;
}
.p2 {
font-variant-numeric: diagonal-fractions;
}
</style>
</head>
<body>
<h2>Font-variant-numeric property example</h2>
<p class="p1">001528931</p>
<p class="p2">1/2</p>
</body>
</html>Результат
Сравнение нескольких возможностей
В этом примере каждая числовая возможность применяется к отдельному абзацу, чтобы их можно было сравнить (в шрифте с поддержкой этих функций, например во многих гарнитурах Google Fonts).
<!DOCTYPE html>
<html>
<head>
<title>font-variant-numeric features</title>
<style>
.lining { font-variant-numeric: lining-nums; }
.oldstyle { font-variant-numeric: oldstyle-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.diagonal { font-variant-numeric: diagonal-fractions; }
.slashed { font-variant-numeric: slashed-zero; }
</style>
</head>
<body>
<p class="lining">lining-nums: 0123456789</p>
<p class="oldstyle">oldstyle-nums: 0123456789</p>
<p class="tabular">tabular-nums: 1111 vs 8888</p>
<p class="diagonal">diagonal-fractions: 1/2 3/4</p>
<p class="slashed">slashed-zero: 1000 2030</p>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| normal | Альтернативные глифы не включены. |
<numeric-figure-values> | Управляет стилем цифр. Ключевые слова: lining-nums, oldstyle-nums. |
<numeric-spacing-values> | Управляет шириной интервала. Ключевые слова: proportional-nums, tabular-nums. |
<numeric-fraction-values> | Управляет стилем дробей. Ключевые слова: diagonal-fractions, stacked-fractions. |
| ordinal | Заменяет цифры надстрочными порядковыми глифами (например, ¹ˢᵗ, ²ⁿᵈ) вместо добавления текста «st» или «nd». Соответствует OpenType ordn. |
| slashed-zero | Принудительно отображает ноль с косой чертой. Соответствует OpenType zero. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
font-variant-numeric — одно из нескольких расширенных свойств сокращённой записи font-variant. Остальные управляют другими категориями глифов:
- font-variant-caps — малые прописные, петитные и титульные глифы.
- font-variant-ligatures — обычные, дополнительные и контекстуальные лигатуры.
Поддерживается начиная с CSS3.