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 - дозволяє відображати звичайні цифри.

oldstyle-nums - вмикає відображення старих цифр.

автор: Svitlana

правити

<numeric-spacing-values>

proportional-nums - дозволяє відображати пропорційні цифри.

tabular-nums - вмикає відображення табличних чисел.

автор: Svitlana

правити

<numeric-fraction-values>

diagonal-fractions - активізуює набір фігур, де чисельник і знаменник зменшені і розділені косою лінією.

stacked-fractions - активізує набір фігур, де чисельник і знаменник зменшені, та розділені горизонтальною лінією.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
font-variant-numeric	52.0	34.0	9.1	39.0	Не підтримується	Не підтримується

Підтримка: мобільні переглядачі

Переглядач
font-variant-numeric	52.0	52.0	34.0

Приклади

+ запропонувати свій приклад у пісочниці

<p class="prop">Пропорційні: 111 888</p>
<p class="tab">tabular-nums: 111 888</p>
<p class="zero">slashed-zero: 0 проти O</p>

p {
    font-size: 24px;
}

.tab {
    font-variant-numeric: tabular-nums;
}

.zero {
    font-variant-numeric: slashed-zero;
}