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 рівня 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 | Так |