В font-variant-numericимота в CSS поддържа формат на шрифта OpenType от уточняващи числови глифове за използване на един клас, включително вариации за фракции, редни маркери и стил вариации между другото.
Малък контекст
Склонни сме да мислим за числата като за статичен глиф. Отпечатва се и това е така. Цифрите обаче приличат много повече на букви от азбука в смисъл, че могат да имат варианти, които в зависимост от контекста си заслужават да се модифицира стилът. Говорим за неща като дроби (напр. 1/4), ординали (напр. 1-ви) и дори еквивалент на главни и малки букви. Въпреки това, за разлика от буквите, тези варианти не променят значението на съдържанието, въпреки че придават допълнителен контекст или оказват влияние върху четливостта.
Търкането с това свойство е, че е проектирано да работи с шрифтове с активиран OpenType, нов, но бързо развиващ се формат на шрифта, който предоставя по-обширен набор от глифи, които могат да бъдат насочени към използване в различен контекст. Често можете да чуете OpenType, наричан променлив шрифт и това е така, защото те съдържат по-голямо разнообразие от символи, което ги прави по-гъвкави за различни приложения. Вариации за всички неща!
Въпросът е, че наличността на шрифтове, които могат да се възползват в пълна степен font-variantи font-variant-numericе ограничена. Нараства броят на съвместимите с OpenType шрифтове, но има много по-малък набор от опции, които използват всички функции, които font-variant-numericпредлагат и които често са първокласни и скъпи. Ричард Бътлър обобщава това добре:
Имаме на разположение „главни“ номера, наречени подредени или заглавни цифри, и „малки“ цифри, наречени стария стил или текстови цифри. ... Също така случаят е, че по-голямата част от шрифтовете не са нито модерни, нито професионални, ако модерните означава OpenType- активирани и професионални средства, проектирани с двата набора цифри.
Най-големият проблем, с който обикновено се занимаваме, когато става въпрос за CSS свойства, е поддръжката на браузъра, но това свойство и всички останали свързани font-variantсъщо са на милостта на дизайнерите на шрифтове, за да предоставят пълна поддръжка на масата.
Това е неприятно, но започваме да виждаме да се появяват по-модерни и професионални шрифтове, дори по време на писането. Adobe TypeKit обяви, че работи за поддръжка на OpenType функции и се говореше, че Google Fonts е на борда и сега, когато Chrome 62 ги поддържа.
Основна употреба
Това е най-основното използване на имота:
.fraction ( font-variant-numeric: diagonal-fractions; )По-старите браузъри няма да разпознаят това, но приемат, font-feature-settingsкоито отключват едни и същи функции с различни стойности. Можем да сдвоим двете свойства за по-задълбочена поддръжка:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Или можем да приспособим това, за да издухаме поддръжката на браузъра, @supportsтака че новото свойство да се обслужва само за поддържащи браузъри:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Стойности
В font-variant-numericимота приема следните стойности. Съответната font-feature-settingsстойност е отбелязана за справка.
Общи ценности
| Стойност | Описание | Настройка на характеристиките |
|---|---|---|
normal | Нито една от изброените по-долу функции не е активирана. | Неприложимо |
ordinal | Прилага букви за представяне на числов ред, обикновено под формата на горен индекс. | ordn |
slashed-zero | Показва алтернативна форма на нула с диагонална линия, която минава през нея. | zero |
Числови фигурни стойности
| Стойност | Описание | Настройка на характеристиките |
|---|---|---|
lining-nums | Линиите се номерират вертикално, така че да се придържат към една и съща височина, се подравняват на една и съща равнина. | lnum |
oldstyle-nums | Позволява алтернативно вертикално подравняване, при което числата не винаги се показват равномерно на една и съща базова линия. | onum |
Числови стойности на фракциите
| Стойност | Описание | Настройка на характеристиките |
|---|---|---|
diagonal-fractions | Показва дробни части в по-малък формат, където числителят (горното число) и знаменателят (долното число) са разделени с диагонална наклонена черта. | frac |
stacked-fractions | Показва дробни части в по-малък формат, където числителят и знаменателят са подредени една върху друга и разделени с хоризонтална линия. | afrc |
Числени стойности на разстоянието
| Стойност | Описание | Настройка на характеристиките |
|---|---|---|
proportional-nums | Позволява на числата да заемат собствено количество пространство, което не е непременно равно на ширината на други цифри. | pnum |
tabular-nums | Показва числа с еднакви размери, пропорционалност и интервал за чисто форматиране в контекст на таблични данни. | tnum |
Спецификацията включва специална бележка за използването на, ordinalзащото прилича на горния supелемент, но е маркирана по различен начин.
За горните индекси:
sup ( font-variant-position: super; )Two squared is 22За редови маркери:
.ordinal ( font-variant-numeric: ordinal; )1stПоддръжка на браузър
Понастоящем font-variant-numericсобствеността е част от спецификацията на модул CSS Fonts Level 3, която е в състояние на препоръка за кандидат по време на писането, което означава, че може да се промени всеки момент.
работен плот
| Chrome | Ръб, край | Firefox | IE | Опера | Сафари |
|---|---|---|---|---|---|
| 52 | Не | 34 | Не | 39 | 9.1 |
Firefox 24-34 (ексклузивно) поддържа свойството зад layout.css.font-features.enabledпредпочитанието, когато е настроено на true.
Подвижен
| Браузър за Android | Chrome Android | Ръб, край | Firefox | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Не | 34 | Не | 39 | Да |