Руководство пользователя Отмена

Использование функций OpenType

Поиск

Последнее обновление 23 июн. 2023 г.

Функции OpenType — это своеобразные «потайные отделения» в шрифтах. Разблокируйте эти функции, и вы сможете настраивать внешний вид и поведение шрифтов по своему усмотрению. Не все функции OpenType подходят для постоянного использования, но некоторые из них способны вывести качество оформления на кардинально новый уровень.

Чтобы использовать функции OpenType для шрифтов в своем проекте, вам необходимо включить их в веб-проект, а затем стилизовать текст с помощью требуемого CSS. Примеры каждой из функций, включая соответствующие коды, которые можно скопировать и вставить в CSS, см. в руководстве по синтаксису.

Добавление функций OpenType в свой проект

Чтобы добавить функции OpenType для шрифтов веб-проекта, посетите страницу веб-проектов и нажмите на ссылку «изменить». В разделе «Набор символов» установите флажок «Функции OpenType».

После установки этого флажка вы увидите список функций, доступных для данного семейства веб-шрифтов, например лигатуры, альтернативные символы или уменьшенные прописные буквы.

В списке показаны функции OpenType, доступные для шрифтов семейства независимо от их типа насыщенности и стиля. Если функция доступна только для некоторых типов насыщенности и стилей, то она не включается в список.

Убедитесь в том, что браузер поддерживает используемые функции.

Проблемы с поддержкой браузером параметров тех или иных вариантов либо функций шрифта может привести к тому, что функции OpenType могут работать некорректно во всех важных для вас контекстах.

Поддержка зависит от массы нюансов. Более новые версии браузеров, которые заявляют о поддержке, могут иметь некоторые ограничения, а старые браузеры, которые не поддерживают функции OpenType, могут давать сбои при попытке отображения этих шрифтов. По умолчанию Chrome не включает функции, которые должны быть включены по умолчанию (например, общие лигатуры и контекстные варианты начертания). Safari в macOS и iOS игнорирует любые заданные настройки шрифтов, вместо этого некоторые функции включаются по умолчанию, при этом изменить выбираемые значения по умолчанию невозможно. В некоторых версиях Firefox (версии 15 и ранее) могут возникать проблемы при включении нескольких стилистических наборов. Применение функций OpenType в Chrome 32 и более новых версий приводит к прекращению работы веб-шрифтов.

-moz-font-feature-settings: &quot;smcp&quot;;
-webkit-font-feature-settings: &quot;smcp&quot;;
font-feature-settings: &quot;smcp&quot;;

Текущая поддержка браузеров во многом зависит от префиксов поставщиков. В справочном документе Синтаксис для функций OpenType в CSS вы найдете полное описание префиксов поставщиков, показанных на примере выше.

Стилизуйте свой текст, добавив функции OpenType с использованием CSS

Синтаксис CSS для включения функций OpenType пока находится на этапе становления. Важно знать, что существуют свойства высокого и низкого уровня, и их наследование довольно сложное.

Свойства шрифтов CSS низкого уровня в некоторой степени поддерживается в браузерах через префиксы поставщиков, но их неудобно использовать по двум причинам. Во-первых, они основаны на использовании четырехзначных тегов функций OpenType, которые трудно запомнить. Во-вторых, все теги функций указаны в одном свойстве, что может вызвать затруднения. См. синтаксис для определенных функций OpenType и синтаксис для использования нескольких функций OpenType.

Свойства шрифтов CSS высокого уровня и их подсвойства хороши тем, что они используют значимые описания на естественном языке, например «small-caps» и «diagonal-fractions». Средство проверки W3C требует их использования во всех возможных случаях, однако поддержка в браузерах отсутствует. Тем не менее это хорошая идея, чтобы привыкнуть к синтаксису.

.class {
  font-variant-caps: small-caps;
  font-feature-settings: &quot;smcp&quot;;
}

Поэтому мы будем использовать как настройки вариантов шрифта, так и настройки функций шрифта, обращая внимание на их предназначение. Сначала мы укажем легко читаемые варианты шрифта в своем CSS, как в приведенном выше коде.

Наследование

Поскольку параметр font-feature (свойство шрифта) является свойством низкого уровня, предназначенным «для особых случаев, когда его использование является единственным способом доступа к конкретной редко используемой функции шрифта», он будет переопределять параметр font-variant (вариант шрифта) независимо от исходной последовательности. Но будьте осторожны: он также будет переопределять и сам себя.

body {
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: &quot;onum&quot;;
}

.class {
  font-variant-caps: small-caps;
  font-feature-settings: &quot;smcp&quot;; /* disables onum from body declaration */
}

Любые унаследованные значения параметра font-feature (свойство шрифта) переопределяются при повторном применении свойства. В приведенном выше примере для того, чтобы элементы с указанным классом использовали параметры все строчные (smcp) и цифры в старом стиле (onum), значение «onum» нужно будет добавить повторно, таким образом, объявление будет иметь следующий вид:

.class {
  font-variant-caps: small-caps;
  font-feature-settings: &quot;onum&quot;, &quot;smcp&quot;;
}

Индексированные значения параметра font-feature (свойство шрифта)

Некоторые значения параметра font-feature (свойство шрифта) устроены немного сложнее. В используемых до этого примерах каждое значение было представлено отдельной строкой (или набором строк, разделенных запятыми). Наличие или отсутствие тегов функций, таких как «onum» и «smcp» можно сравнить с двоичным выбором: функции либо включены, либо выключены.

Это вполне разумно. Но что, если шрифт, например, содержит две разных версии каллиграфического начертания заглавной буквы «А»? В этом случае нам недостаточно просто включить поддержку каллиграфических начертаний, нам также нужно выбрать конкретный вариант каллиграфического начертания. Итак, мы можем добавить числовой индекс к значению после строки:

font-feature-settings: &quot;swsh&quot; 2;

У вас может возникнуть вопрос: «какое число нужно здесь использовать»? Сколько есть разных версий каллиграфического начертания шрифта? Здесь все зависит от шрифта. Значение «0» позволяет отключить каллиграфические начертания. То же относится и к другим функциям, использующим числовые индексы, например стилистические варианты и стилистические наборы.

Использование нескольких функций OpenType

Свойство font-variant (вариант шрифта) — это условное обозначение, используемое CSS для всех подсвойств font-variant. Для включения общих лигатур и цифр в старом стиле мы можем поступить следующим образом:

.class {
  font-variant: common-ligatures, oldstyle-nums;
}

Точно так же вы можете включить несколько функций с помощью параметров font-feature (свойство шрифта) со списком значений, разделенных запятыми:

.class {
  font-feature-settings: &quot;liga&quot;, &quot;onum&quot;;
}

В обоих случаях унаследованные значения полностью переопределяются, и их поддержка браузером может зависеть от различных факторов. Учитывайте, что значения свойства font-variant (вариант шрифта) иногда не предусматривают одновременную активацию нескольких функций (см. преобразование заглавных букв в уменьшенные заглавные).

Ресурсы

Если вы готовы начать стилизацию с помощью CSS, добавьте в закладки наш глоссарий синтаксиса для часто используемых функций OpenType

Adobe

Получайте помощь быстрее и проще

Новый пользователь?