CSS-свойство font-variant-numeric позволяет управлять видом альтернативных глифов для чисел, дробей и порядковых маркеров. Используется оно для придания лучшей читабельности и эстетики текста, содержащего большое количество числовых данных (например, финансовые отчеты, статистические данные и научные статьи).
Синтаксис свойства:
.text-box {
font-variant-numeric: <значение свойства>;
}В качестве значений свойства могут быть следующие:
- normal - отображение цифровых символов по умолчанию,
- ordinal - отображение маркеров, отвечающих за указание порядкового номера (st, nd, rd, th),
- slashed-zero - отображение нуля с косой чертой,
- lining-nums - отображение цифр с той же высотой, что и прописные буквы,
- oldstyle-nums - отображение цифр разной высоты и выравненных относительно базовой линии текста,
- proportional-nums - отображение цифр со своим натуральным размером и отступами,
- tabular-nums - отображение цифр с одинаковой шириной и отступами,
- diagonal-fractions - отображение дробей с косым компактным разделителем,
- stacked-fractions - отображение дробей с обычным разделителем.
Также несколько значений свойства могут быть объединены общим с разделением через пробел:
.text-box {
font-variant-numeric: ordinal proportional-nums stacked-fractions;
}Таблица с примерами использования различных значений свойства font-variant-numeric:
| normal | ordinal | slashed-zero |
| 0 1st 2nd | 0 1st 2nd | 0 1st 2nd |
| lining-nums | oldstyle-nums |
| Numbers 1234.56 | Numbers 1234.56 |
| proportional-nums | tabular-nums |
| Numbers 1234.56 | Numbers 1234.56 |
| diagonal-fractions | stacked-fractions |
| 2/5 | 2/5 |
Применяя свойство font-variant-numeric необходимо учитывать конкретный контент и контекст, поскольку разные параметры могут иметь разную читаемость и эстетический эффект.
Также следует иметь в виду, что не все шрифты полностью поддерживают вышеуказанные типы отображения глифов.
Комментарии (0)