css властивість font-variant-numeric
Властивість font-variant-numeric дозволяє контролювати стиль відображення чисел на сторінці.
Властивість font-variant-numeric є однією із властивостей у CSS3, які використовуються для ввімкнення різних функцій, пов'язаних зі шрифтом та покращення зовнішнього вигляду тексту на сторінці. У даному випадку властивість застосовується для чисел.
Синтаксис
font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ]Властивість font-variant-numeric може отримувати 6 значень:
-
normal -
Вказує, що жодна з наведених нижче функцій не активована.
автор: Svitlana -
ordinal -
Це ключове слово зумовлює використання спеціальних гліфів для порядкових маркерів.
автор: Svitlana -
slashed-zero -
Це ключове слово призводить до використання 0 (нуля) з косою рискою всередині символу (перекресленням).
автор: Svitlana -
<numeric-figure-values> -
lining-nums- дозволяє відображати звичайні цифри.
автор: Svitlanaoldstyle-nums- вмикає відображення старих цифр. -
<numeric-spacing-values> -
proportional-nums- дозволяє відображати пропорційні цифри.
автор: Svitlanatabular-nums- вмикає відображення табличних чисел. -
<numeric-fraction-values> -
diagonal-fractions- активізуює набір фігур, де чисельник і знаменник зменшені і розділені косою лінією.
автор: Svitlanastacked-fractions- активізує набір фігур, де чисельник і знаменник зменшені, та розділені горизонтальною лінією.
| Значення без задання: | normal |
|---|---|
| Наслідує: | Так |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.fontVariantNumeric |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 52 | 34 | 9.1 | 39 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 52 | 52 | 34 | 9.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Цифрові можливості шрифту: tabular-nums робить усі цифри однакової ширини (111 і 888 вирівнюються), slashed-zero перекреслює нуль, щоб не плутати з O. Потрібна підтримка з боку шрифту.
HTML
<p class="prop">Пропорційні: 111 888</p>
<p class="tab">tabular-nums: 111 888</p>
<p class="zero">slashed-zero: 0 проти O</p>CSS
p {
font-size: 24px;
}
.tab {
font-variant-numeric: tabular-nums;
}
.zero {
font-variant-numeric: slashed-zero;
}Значення у дії
Приклад використання
Коментарі
Коментарів ще немає — будьте першим!