Руководство по функциям шрифтов OpenType

Иногда это самая сложная задача, если у вас нет документации, которая поставляется с шрифтами (многие дизайнеры шрифтов и компании-производители предоставляют образцы страниц и CSS именно по этой причине). Но существуют некоторые сайты, которые упрощают это. Вы можете посетить wakamaifondue.com, загрузить свой шрифтовой файл в указанный круг, и через несколько мгновений вы получите полный отчет обо всех возможностях и функциях вашего шрифта. Axis-praxis.org также предлагает аналогичную возможность, позволяя нажимать на функции, чтобы включать или отключать их в заданном блоке текста.

Учитывая, что для поиска и использования этих функций требуется определенная работа, может возникнуть справедливый вопрос о том, зачем их использовать. Ответ заключается в конкретных функциях, которые сделают сайт более полезным, удобочитаемым и стилизованным:

• Лигатуры, такие как «ff» или «fi», делают интервалы между буквами и чтение более равномерными и плавными.
• Дроби могут значительно облегчить чтение и понимание сайтов о строительстве и рецептах.
• Цифры в абзацах текста, заданные как «oldstyle», располагаются более комфортно между строчными буквами, а установка их как «табличные цифры» обеспечит их лучшее выравнивание при создании списка расходов в таблице. Лигатурные цифры, с другой стороны, более равномерно располагаются сами по себе или перед заглавными словами.

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

Функции OpenType — это как секретные отделения в шрифтах. Откройте их, и вы найдете способы сделать шрифты выглядеть и вести себя по-разному — тонкими и драматичными способами. Не все функции OpenType подходят для использования всегда, но некоторые функции критически важны для отличной типографики. — Тим Браун, руководитель отдела типографики в Adobe.

В некоторых случаях, например, с font-variant-east-asian, функции OpenType напрямую связаны с использованием различных форм определенных глифов, что может повлиять на смысл и читаемость. В таких случаях это больше, чем просто удобство, а скорее неотъемлемая часть самого контента.

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

Соответствующее свойство CSS: font-kerning

Это относится к интервалам между конкретными парами глифов. Как правило, он включен по умолчанию (как рекомендуется спецификацией OpenType). Следует отметить, что если также задан letter-spacing для вашего текста, это применяется после кернинга. Нажмите «Запуск» в блоках кода ниже, чтобы изменить пример в MDN Playground:

/* kerning: auto|normal|none */
.container1 * {
  font-kerning: normal;
}
.inactive.container1 * {
  font-kerning: none;
}

/* 'kern' 1|0 (on or off) */
.container2 * {
  font-feature-settings: "kern" 1;
}
.inactive.container2 * {
  font-feature-settings: "kern" 0;
}

Соответствующее свойство CSS: font-variant-alternates

Шрифты могут предоставить множество различных альтернатив для различных глифов, таких как разные стили строчной буквы «a» или более или менее сложные декоративные элементы в шрифте с засечками. Это свойство может активировать весь набор альтернатив или только конкретную, в зависимости от предоставленных значений. Пример ниже демонстрирует несколько различных аспектов работы с альтернативными символами. Шрифты с альтернативными глифами могут делать их доступными для всех или индивидуально в отдельных стилистических наборах или даже отдельных символов. В этом примере вы можете увидеть два разных шрифта и введение правила @font-feature-values. Оно используется для определения сокращений или именованных вариантов, которые могут быть определены для каждой семьи шрифтов. Таким образом, вы можете создать именованный вариант, который применяется только к одному шрифту, или вариант, который используется совместно и может применяться более широко. Нажмите «Запустить» в блоках кода ниже, чтобы изменить пример в MDN Playground:

@font-feature-values "Plex Serif" {
  @styleset {
    alt-a: 1;
    alt-g: 2;
  }
  @stylistic {
    alternates: 1;
  }
}

@font-feature-values "Dancing Script" {
  @stylistic {
    alternates: 1;
  }
}

.container1 * {
  font-variant-alternates: styleset(alt-a);
}
.container1 .script {
  font-variant-alternates: stylistic(alternates);
}
.inactive.container1 * {
  font-variant-alternates: normal;
}

.container2 * {
  font-feature-settings: "ss01";
}
.container2 .script {
  font-feature-settings: "salt";
}
.inactive.container2 * {
  font-feature-settings:
    "ss01" 0,
    "salt" 0;
}

В этом случае @stylistic(alternates) отобразит все альтернативные символы для каждого шрифта. Применение этого только к слову «My» изменяет отображение буквы «М», а применение @styleset(alt-a) изменяет только строчную букву «a».

Попробуйте изменить строку

font-variant-alternates: styleset(alt-a);

на

font-variant-alternates: styleset(alt-g);

и обратите внимание, что строчная буква «a» возвращается к своему обычному виду, а вместо неё меняется строчная буква «g».

Больше об альтернативах

• https://www.w3.org/TR/css-fonts-4/#propdef-font-variant-alternates

Соответствующее свойство CSS: font-variant-ligatures

Лигатуры — это глифы, которые заменяют два или более отдельных глифа, чтобы представить их более плавно (с точки зрения интервалов или эстетики). Некоторые из наиболее распространённых — буквы «fi», «fl» или «ffl», но есть и многие другие возможности. Существуют самые частые (называемые общими лигатурами), а также более специализированные категории, такие как «дискреционные лигатуры», «исторические лигатуры» и «контекстуальные альтернативы». Хотя последние технически не являются лигатурами, они, как правило, похожи по характеру, заменяя определённые сочетания букв, когда они появляются вместе.

Хотя они чаще встречаются в шрифтах с засечками, в примере ниже они используются для создания стрелок. Нажмите «Запустить» в блоках кода ниже, чтобы изменить пример в MDN Playground:

.container1 * {
  font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}
.inactive.container1 * {
  font-variant-ligatures: none;
}

/* 'liga', 'dlig', 'hlig', 'calt' */
.container2 * {
  font-feature-settings: "dlig", "liga", "calt";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0;
}

Соответствующее свойство CSS: font-variant-position

Варианты позиции используются для включения типографических символов надстрочного и подстрочного индексов. Они разработаны для работы с окружающим текстом без изменения базовой линии или межстрочного интервала. Это особенно полезно с элементами <sub> или <sup>. Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

/* position: normal|sub|super */
.container1 .super {
  font-variant-position: super;
}
.container1 .sub {
  font-variant-position: sub;
}
.inactive.container1 * {
  font-variant-position: normal;
}

/* 'subs', 'sups' */
.container2 .super {
  font-feature-settings: "sups";
}
.container2 .sub {
  font-feature-settings: "subs";
}
.inactive.container2 * {
  font-feature-settings:
    "sups" 0,
    "subs" 0;
}

Соответствующее свойство CSS: font-variant-caps

Одним из наиболее распространённых случаев использования функций OpenType является правильное использование мелких прописных букв. Это заглавные буквы, размер которых лучше подходит для строчных букв, и их обычно используют для аббревиатур и сокращений. Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

/* position: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps */
.container1 .small-caps {
  font-variant-caps: small-caps;
}
.container1 .all-small-caps {
  font-variant-caps: all-small-caps;
}
.inactive.container1 * {
  font-variant-caps: normal;
}

/* 'smcp', 'c2sc' */
.container2 .small-caps {
  font-feature-settings: "smcp" 1;
}
.container2 .all-small-caps {
  font-feature-settings:
    "c2sc" 1,
    "smcp" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "smcp" 0,
    "c2sc" 0;
}

Соответствующее свойство CSS: font-variant-numeric

В шрифтах часто используются несколько различных стилей цифр:

• Цифры «линейные» имеют одинаковую высоту и расположены на одной базовой линии.
• Цифры «старинные» имеют разную высоту и предназначены для создания впечатления восходящих и нисходящих элементов, как и другие строчные буквы. Они предназначены для использования в строке, чтобы цифры визуально сливались с окружающими символами, подобно мелким прописным буквам.

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

С помощью этого свойства поддерживаются два типа дробей:

• Дроби со штрихом.
• Вертикально расположенные дроби.

Также поддерживаются порядковые номера (например, «1-й» или «3-й»), а также прочеркнутый ноль, если он присутствует в шрифте.

Линейные и старинные цифры

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

.container1 .lining {
  font-variant-numeric: lining-nums;
}
.container1 .oldstyle {
  font-variant-numeric: oldstyle-nums;
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

.container2 .lining {
  font-feature-settings: "lnum" 1;
}
.container2 .oldstyle {
  font-feature-settings: "onum" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "lnum" 0,
    "onum" 0;
}

Дроби, порядковые номера и прочеркнутый ноль

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

.container1 .diagonal-fractions {
  font-variant-numeric: diagonal-fractions;
}
.container1 .ordinal {
  font-variant-numeric: ordinal;
}
.container1 .zero {
  font-variant-numeric: slashed-zero;
}
.inactive.container1 * {
  font-variant-numeric: normal;
}

.container2 .diagonal-fractions {
  font-feature-settings: "frac" 1;
}
.container2 .ordinal {
  font-feature-settings: "ordn" 1;
}
.container2 .zero {
  font-feature-settings: "zero" 1;
}
.inactive.container2 * {
  font-feature-settings:
    "frac" 0,
    "ordn" 0,
    "zero" 0;
}

Соответствующее свойство CSS: font-variant-east-asian

Это позволяет получить доступ к различным альтернативным формам символов в шрифте. Пример ниже показывает строку нормальных символов. Снимите флажок ниже, и вы увидите символы только с jis78 символами. Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

.container1 * {
  font-variant-east-asian: normal;
}
.inactive.container1 * {
  font-variant-east-asian: jis78;
}

.container2 * {
  font-feature-settings: "jp78" 0;
}
.inactive.container2 * {
  font-feature-settings: "jp78";
}

Свойство font-variant — это краткая запись для определения всех вышеперечисленных значений. Установка значения normal сбрасывает все свойства до их начального значения. Установка значения none устанавливает font-variant-ligatures в значение none и все остальные свойства до их начального значения. Это означает, что если кернинг включён по умолчанию, он останется включённым, даже если здесь указано значение none. Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в MDN Playground:

.container1 * {
  font-variant: common-ligatures discretionary-ligatures contextual
    diagonal-fractions;
}
.inactive.container1 * {
  font-variant: none;
}

.container2 * {
  font-feature-settings: "dlig", "liga", "calt", "frac";
}
.inactive.container2 * {
  font-feature-settings:
    "dlig" 0,
    "liga" 0,
    "calt" 0,
    "frac" 0;
}

font-feature-settings — это «синтаксис низкого уровня», который позволяет явно получить доступ ко всем именованным функциям OpenType. Это даёт большой контроль, но имеет некоторые недостатки, связанные с наследованием, и, как упоминалось выше, если вы хотите изменить одну настройку, вам нужно переопределить всю строку (если вы не используете свойства CSS для установки значений). По этой причине лучше всего использовать стандартные свойства, показанные выше, когда это возможно.

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

Общий синтаксис выглядит следующим образом:

.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

Согласно спецификации, вы можете указать только 4-символьный код функции или указать 1 после кода (для включения этой функции) или 0 (ноль) для её отключения. Это полезно, если функция, например, кернинг, включена по умолчанию, но вы хотите её отключить, как показано ниже:

.no-ligatures {
  font-feature-settings:
    "liga" 0,
    "dlig" 0;
}

• «Полный демонстрационный пример CSS для функций OpenType» (не могу поручиться за точность названия, но он довольно большой)
• Список функций OpenType в Википедии

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

Например, мелкие прописные буквы можно установить несколькими способами, но если вы хотите убедиться, что независимо от базового написания все будет в мелких прописных буквах, это требует 2 настроек с font-feature-settings вместо одного значения свойства с использованием font-variant-caps.

.small-caps {
  font-feature-settings: "smcp", "c2sc";
}

@supports (font-variant-caps: all-small-caps) {
  .small-caps {
    font-feature-settings: normal;
    font-variant-caps: all-small-caps;
  }
}

• Полный демонстрационный пример CSS для функций OpenType

• Wakamai Fondue
• Axis Praxis

• Свойства функций шрифта в модуле CSS Fonts Level 3
• font-variant-alternatives в модуле CSS Fonts Level 4

• Использование функций OpenType от Тима Брауна, руководителя отдела типографики Adobe
• Синтаксис Adobe для функций OpenType в CSS