css властивість font-variant-numeric


Властивість 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

Вказує, що жодна з наведених нижче функцій не активована.

ordinal

Це ключове слово зумовлює використання спеціальних гліфів для порядкових маркерів.

slashed-zero

Це ключове слово призводить до використання 0 (нуля) з косою рискою всередині символу (перекресленням).

<numeric-figure-values>

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

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

<numeric-spacing-values>

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

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

<numeric-fraction-values>

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

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

Значення без задання: normal
Наслідує: Так
Анімується: Ні
JavaScript синтаксис: object.style.fontVariantNumeric

Переглядачі

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

52.0

Не підтримується

34.0

39.0

9.1

Не підтримується

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

52.0

52.0

34.0


Мобільних переглядачів ще не додано.

Приклади


Значення у дії

Приклад використання

Приклад використання

See the Pen yGmWOB by css.in.ua (@css_in_ua) on CodePen.

Синтаксис

font-variant-numeric: normal


font-variant-numeric: ordinal


font-variant-numeric: slashed-zero


font-variant-numeric: lining-nums


font-variant-numeric: oldstyle-nums 


font-variant-numeric: proportional-nums


font-variant-numeric: tabular-nums


font-variant-numeric: diagonal-fractions


font-variant-numeric: stacked-fractions


font-variant-numeric: oldstyle-nums stacked-fractions





font-variant-numeric: initial


font-variant-numeric: inherit


font-variant-numeric: unset

Додаткові посилання