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 Module Level 3, которая на момент написания этой статьи находится в статусе кандидата в рекомендации, что означает, что она может измениться в любой момент.
Рабочий стол
| Хром | Край | Fire Fox | IE | Опера | Сафари |
|---|---|---|---|---|---|
| 52 | Нет | 34 | Нет | 39 | 9.1 |
Firefox 24-34 (эксклюзивный) поддерживает свойство, стоящее за layout.css.font-features.enabledпредпочтением, если для него установлено значение true.
Мобильный
| Браузер Android | Chrome Android | Край | Fire Fox | IE | Опера Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Нет | 34 | Нет | 39 | да |