2.29. CSS3-шрифты
Современные технологии шрифтов поддерживают множество расширенных типографских и языковых функций. Используя их, один шрифт может предоставлять глифы для широкого спектра лигатур, контекстных и стилистических альтернатив, табличных и старых символов, маленьких прописных, автоматических дробей, штрихов и альтернатив, специфичных для данного языка.
Чтобы позволить авторам контролировать эти возможности шрифта, свойство font-variant было расширено для CSS3. Теперь оно функционирует как сокращение для набора свойств, которые обеспечивают контроль над стилистическими функциями шрифта.
Расширенные возможности свойств шрифтов
- Содержание:
- 1. Кернинг: свойство font-kerning
- 2. Лигатуры: свойство font-variant-ligatures
- 3. Подстрочные и надстрочные формы: свойство font-variant-position
- 4. Преобразование в заглавные буквы: свойство font-variant-caps
- 5. Форматирование цифр: свойство font-variant-numeric
- 6. Визуализация восточноазиатского текста: свойство font-variant-east-asian
- 7. Общее сокращение для рендеринга шрифтов: свойство font-variant
- 8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
1. Кернинг: свойство font-kerning
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 33, 29 -webkit-
Safari: 9.1, 7 -webkit-
Opera: 20, 16 -webkit-
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 4
Кернинг — это контекстная настройка межглифевого интервала. Свойство font-kerning позволяет избирательно изменять интервал между символами в зависимости от их формы. Для шрифтов, которые не содержат данных кернинга, это свойство не будет иметь видимого эффекта.
Свойство наследуется.
| font-kerning | |
|---|---|
| Значения: | |
| auto | Указывает, что кернинг применяется по усмотрению пользовательского агента на основе ряда факторов: размера текста, скриптов или других факторов, влияющих на скорость обработки текста. Значение по умолчанию. |
| normal | Указывает, что кернинг применяется. |
| none | Указывает, что кернинг не применяется. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-kerning: auto;
font-kerning: normal;
font-kerning: none;
font-kerning: inherit;
font-kerning: initial;
2. Лигатуры: свойство font-variant-ligatures
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Лигатуры и контекстные формы — это способы объединения глифов в один знак-глиф для создания более гармоничных форм. Свойство font-variant-ligatures определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов.
Свойство наследуется.
| font-variant-ligatures | |
|---|---|
| Значения: | |
| normal | Указывает, что общие функции по умолчанию включены. Для шрифтов OpenType основные лигатуры и контекстные формы включены по умолчанию, а дискреционные и исторические лигатуры — нет. Значение по умолчанию. |
| none | Указывает, что все типы лигатур и контекстных форм, охватываемых этим свойством, явно отключены. В ситуациях, когда лигатуры не считаются необходимыми, это может повысить скорость рендеринга текста. |
| common-ligatures | Включает отображение общих лигатур (функции OpenType: liga, clig). Для шрифтов OpenType общие лигатуры включены по умолчанию. |
| no-common-ligatures | Отключить отображение общих лигатур (функции OpenType: liga, clig). |
| discretionary-ligatures | Включает отображение дискреционных лигатур (функция OpenType: dlig). Какие лигатуры являются дискреционными или необязательными, определяется конструктором типов, поэтому авторам нужно будет обратиться к документации данного шрифта, чтобы понять, какие лигатуры считаются дискреционными. |
| no-discretionary-ligatures | Отключает отображение дискреционных лигатур (функция OpenType: dlig). |
| historical-ligatures | Включает отображение исторических лигатур (функция OpenType: hlig). |
| no-historical-ligatures | Отключает отображение исторических лигатур (функция OpenType: hlig). |
| contextual | Включает отображение контекстных альтернатив (функция OpenType: calt). Хотя эта функция не является строго лигатурой, как и лигатуры, она обычно используется для согласования форм глифов с окружающим контекстом. Для шрифтов OpenType эта функция включена по умолчанию. |
| no-contextual | Отключает отображение контекстных альтернатив (функция OpenType: calt). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;
font-variant-ligatures: historical-ligatures;
font-variant-ligatures: no-historical-ligatures;
font-variant-ligatures: contextual;
font-variant-ligatures: no-contextual;
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
3. Подстрочные и надстрочные формы: свойство font-variant-position
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: —
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: —
Chrome for Android: —
Samsung Internet: —
Свойство font-variant-position используется для включения типографских и надстрочных глифов. Это альтернативные глифы, разработанные в том же блоке, что и глифы по умолчанию, и предназначенные для размещения на той же базовой линии, что и глифы по умолчанию, без изменения размера или изменения положения базовой линии. Они разработаны таким образом, чтобы соответствовать окружающему тексту и быть более читаемыми, не влияя на высоту строки.
Свойство наследуется.
| font-variant-position | |
|---|---|
| Значения: | |
| normal | Означает отсутствие включенных функций. Значение по умолчанию. |
| sub | Включает отображение вариантов нижнего индекса (функция OpenType: subs). |
| super | Включает отображение надстрочных вариантов (функция OpenType: sups). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
font-variant-position: inherit;
font-variant-position: initial;
4. Преобразование в заглавные буквы: свойство font-variant-caps
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: —
Opera: 39
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 52
Samsung Internet: 6
Свойство font-option-caps контролирует использование альтернативных глифов для заглавных букв.
Свойство наследуется.
| font-variant-caps | |
|---|---|
| Значения: | |
| normal | Означает отсутствие функций преобразования. Значение по умолчанию. |
| small-caps | Включает отображение маленьких заглавных букв (функция OpenType: smcp). Глифы маленьких заглавных букв обычно используют форму заглавных букв, но уменьшены до размера строчных букв. |
| all-small-caps | Позволяет отображать заглавные буквы как заглавными, так и строчными буквами (функции OpenType: c2sc, smcp). При использовании обычных маленьких заглавных букв любой заглавный символ отображается в полном верхнем регистре, а строчные — меньше. Однако при использовании этого ключевого слова эти заглавные буквы отображаются с меньшим размером. |
| petite-caps | Включает отображение миниатюрных заглавных букв (функция OpenType: pcap) Если шрифт не поддерживает миниатюрные заглавные буквы, свойство ведет себя так, как будто вместо него было задано small-caps. |
| all-petite-caps | Позволяет отображать маленькие заглавные буквы как в верхнем, так и в нижнем регистре (функции OpenType: c2pc, pcap). В противном случае ведет себя так, как будто вместо него было задано all-small-caps. |
| unicase | Включает отображение сочетания маленьких заглавных букв для прописных букв с обычными строчными (функция OpenType: unic). |
| titling-caps | Предназначен для заголовков и названий в тексте (функция OpenType: titl). Включает отображение специальных заглавных букв для заголовков, с менее жирным начертанием, чем у обычных заголовков. Если шрифт не поддерживает эту функцию, ключевое слово не имеет видимых действий. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
font-variant-caps: inherit;
font-variant-caps: initial;Доступность этих глифов зависит от того, определена ли данная функция в списке возможностей шрифта. Для обратной совместимости с CSS 2.1, если указаны small-caps или all-small-caps, но глифы small-caps недоступны для данного шрифта, браузеры должны имитировать шрифт small-caps, например, взяв обычный шрифт и заменив глифы для строчных букв масштабированными версиями глифов для заглавных букв по аналогии с text-transform: uppercase (заменить глифы как для заглавных, так и для строчных букв в случае all-small-caps).
Если для шрифта, который не поддерживает эти функции, указано petite-caps или all-petite-caps, свойство ведет себя так, как если бы small-caps или all-small-caps были указаны соответственно.
Если для шрифта, который не поддерживает эту функцию, указано unicase, свойство ведет себя так, как будто small-caps применился только к заглавным буквам в нижнем регистре.
5. Форматирование цифр: свойство font-variant-numeric
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 52
Safari: 9.1
Opera: 39
iOS Safari: 9.3
UC Browser for Android: 11.8
Chrome for Android: 71
Samsung Internet: 6.2
Свойство font-variant-numeric контролирует использование альтернативных глифов для чисел, дробей и порядковых маркеров.
Свойство наследуется.
| font-variant-numeric | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| lining-nums | Выравнивает все цифры по базовой линии текста (функция OpenType: lnum). |
| oldstyle-nums | Отображает некоторые знаки (3, 4, 7, 9) таким образом, чтобы они уходили нижним краем под базовую линию текста (функция OpenType: onum). |
| proportional-nums | Включает отображение пропорциональных чисел (функция OpenType: pnum). |
| tabular-nums | Включает отображение табличных чисел — одинаковой ширины, которые легко выравниваются, как в таблицах (функция OpenType: tnum). |
| diagonal-fractions | Включает символы дробей, в которых числитель и знаменатель уменьшены и разделены косой чертой (функция OpenType: frac). |
| stacked-fractions | Включает символы дробей, где числитель и знаменатель уменьшены, поставлены друг над другом и разделены горизонтальной чертой (функция OpenType: afrc). |
| ordinal | Включает отображение буквенных форм, используемых с порядковыми номерами — специальные глифы для порядковых числительных, например, 1st, 2nd, 3rd, 4th в английском (функция OpenType: ordn). |
| slashed-zero | Включает отображений нулей перечеркнутыми косой линией (функция OpenType: zero). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-numeric: normal;
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: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: oldstyle-nums stacked-fractions;
font-variant-numeric: inherit;
font-variant-numeric: initial;
6. Визуализация восточноазиатского текста: свойство font-variant-east-asian
Поддержка браузерами
IE: —
Edge: —
Firefox: 34
Chrome: 63
Safari: —
Opera: 50
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 63
Samsung Internet: —
Свойство font-variant-east-asian позволяет контролировать замену и размер глифов в восточноазиатском тексте.
Свойство наследуется.
| font-variant-east-asian | |
|---|---|
| Значения: | |
| normal | Функции преобразования не применяются. Значение по умолчанию. |
| jis78 | Включает рендеринг форм JIS78 (функция OpenType: jp78). |
| jis83 | Включает рендеринг форм JIS83 (функция OpenType: jp83). |
| jis90 | Включает рендеринг форм JIS90 (функция OpenType: jp90). |
| jis04 | Включает рендеринг форм JIS2004 (функция OpenType: jp04). |
| simplified | Включает рендеринг упрощенных форм (функция OpenType: smpl). |
| traditional | Включает рендеринг традиционных форм (функция OpenType: trad). |
| full-width | Включает рендеринг символов одинаковой ширины, квадратной формы (функция OpenType: fwid). |
| proportional-width | Включает рендеринг символов разной ширины (функция OpenType: pwid). |
| ruby | Включает отображение глифов вариантов ruby (функция OpenType: ruby). |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-variant-east-asian: normal;
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
font-variant-east-asian: ruby;
font-variant-east-asian: ruby full-width jis83;
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
7. Общее сокращение для рендеринга шрифтов: свойство font-variant
| font-variant | |
|---|---|
| Значения: | |
| normal | Сбрасывает все подсвойства вариантов шрифтов к их начальному значению. Значение по умолчанию. |
| none | Устанавливает для font-variant-ligatures значение none и сбрасывает все остальные свойства шрифта на значение по умолчанию. |
| значения отдельных свойств вариантов шрифта | Определяет ключевые слова и функции, относящиеся к конкретному свойству. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Свойство font-variant является сокращением для всех подсвойств вариантов шрифта. Не сбрасывает значения font-feature-settings.
Синтаксис
font-variant: normal;
font-variant: none;
font-variant: small-caps;
font-variant: common-ligatures small-caps;
font-variant: inherit;
font-variant: initial;8. Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 34, 15 -moz-
Chrome: 48, 21 -webkit-
Safari: 9.1
Opera: 35, 15 -webkit-
iOS Safari: 9.3
UC Browser for Android: 11.8 -webkit-
Chrome for Android: 71
Samsung Internet: 5, 4 -webkit-
Свойство font-feature-settings обеспечивает низкоуровневый контроль над функциями шрифтов OpenType. Оно предназначено для предоставления доступа к функциям шрифтов, которые не используются широко, но необходимы для конкретного случая использования. Авторы обычно должны использовать font-variant и связанные с ним подсвойства, когда это возможно, и использовать это свойство только в особых случаях, когда его использование является единственным способом доступа к определенной редко используемой функции шрифта.
Свойство наследуется.
| font-feature-settings | |
|---|---|
| Значения: | |
| normal | Значение означает, что из-за этого свойства не происходит никаких изменений в выборе или позиционировании глифа. Значение по умолчанию. |
| строка и/или целое число/on/off | Строка представляет собой тег OpenType. Целое число, если присутствует, указывает индекс, используемый для выбора символа. Значение должно быть 0 или больше. Значение 0 указывает, что функция отключена. Для логических объектов значение 1 включает функцию. Для объектов, не являющихся логическими, значение 1 или больше включает объект и указывает индекс выбора объекта. Значение on является синонимом 1, а off является синонимом 0. Если значение опущено, принимается значение 1. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
font-feature-settings: normal;
font-feature-settings: "smcp", "swsh" 2;
font-feature-settings: "dlig" 1;
font-feature-settings: "smcp" on;
font-feature-settings: "c2sc";
font-feature-settings: "liga" off;
font-feature-settings: "tnum", "hist";
font-feature-settings: "tnum" "hist";
font-feature-settings: "PKRN";
font-feature-settings: inherit;
font-feature-settings: initial;По материалам CSS Fonts Module Level 3