Уголок CSS: использование всех возможностей шрифта


Благодаря поддержке правила CSS3 @font-face и формата упаковки шрифтов WOFF в различных браузерах современные средства веб-типографии далеко вышли за рамки шрифтов, которые можно использовать в Интернете. Известные журналы, такие как New Yorker, используют веб-шрифты для сохранения уникальности своих заголовков, а штаб избирательной кампании президента США Барака Обамы использует службу веб-шрифтов Typekit для размещения своего шрифта.

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

Например, «стилистический набор» OpenType, встроенный в шрифт Gabriola, позволяет отобразить следующий текст:

Строка текста шрифта Gabriola без применения стилистических наборов

…как:

Строка текста шрифта Gabriola с применением стилистического набора 6

Последние обновления модуля CSS3 Fonts содержат новый набор свойств, предоставляющих доступ к этим возможностям OpenType в CSS. Эти свойства можно объединить в две широкие категории:

  • Явное сопоставление распространенных возможностей OpenType определенным свойствам и значениям. Например, font-kerning:normal применяет регулировки кернинга пар, закодированных в шрифте, а font-variant-numeric: tabular-nums позволяет использовать табличные цифры.
  • Свойство font-feature-settings обеспечивает доступ на низком уровне ко всем возможностям OpenType, которые поддерживаются шрифтом. Оно представляет собой «запасной выход» для доступа к дополнительным параметрам в менее распространенных ситуациях.

Свойство CSS: font-feature-settings

В предварительной версии 4 браузера Internet Explorer 10 реализована поддержка свойства font-feature-settings. Таким образом, приведенный выше пример со шрифтом Gabriola можно написать следующим образом:

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

Это объявление -ms-font-feature-settings включает стилистический набор, поддерживаемый шрифтом (ss06). Свойство может принимать значение «normal» (нет изменений в выборе или позиционировании глифов) или список компонентов, разделенных запятыми. Каждый компонент содержит тег OpenType из четырех букв и значение. В примере, приведенном выше, ss06 — тег компонента OpenType для стилистического набора 6. Мы задаем для этого компонента значение 1, чтобы включить его.

Реестр компонентов OpenType определяет список возможных тегов (также описанных здесь и стандартизированных ISO). Вот некоторые из наиболее популярных тегов:

Тег OpenType Функция
kern Кернинг
liga Стандартные лигатуры
dlig Дискреционные лигатуры
smcp Малые прописные
subs Нижний индекс
sups Верхний индекс
swsh Декоративные элементы
ss01, ss02, …, ss20 Стилистические наборы 1-20

Подробное иллюстрированное описание этих и многих других возможностей см. в разделе руководства пользователя FontFont OpenType (возможно, на английском языке), посвященном описанию компонентов макета.

Более широко распространены значения включения и выключения. Значения, равные «off» или равные нулю, отключают компонент. Значение «on» или любое другое положительное число активирует компонент. Для некоторых компонентов целое число предоставляет доступ к нескольким вариантам. Это справедливо для декоративных элементов («swsh»). Если для компонента не указано значение, по умолчанию используется значение 1. Таким образом, все следующие объявления эквивалентны нашему примеру со шрифтом Gabriola:

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

Обнаружение поддерживаемых возможностей шрифта

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

Поддержка браузеров

Свойство font-feature-settings на данный момент поддерживается Firefox 4 и более поздними версиями, а также Internet Explorer 10 начиная с предварительной версии 4. Обратите внимание, что поскольку в Firefox и Internet Explorer реализованы различные версии этого свойства, синтаксис значений, который они принимают, отличается. Например, для включения кернинга в обоих браузерах необходимо написать:

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

Дополнительные сведения о свойстве –moz-font-feature-settings см. на странице -moz-font-feature-settings (возможно, на английском языке).

По мере прохождения модулем CSS3 Fonts процесса стандартизации все больше браузеров будут поддерживать свойство font-feature-setttings, а также другие удобные свойства и значения, определенные в этом модуле.

Обратите также внимание на то, что это свойство применяется ко всем семействам шрифтов — и к веб-шрифтам, загруженным с помощью правил @font-face, и к локальным шрифтам, которые задаются по имени.

Демонстрации

На нашем сайте тестирования Internet Explorer (возможно, на английском языке) содержатся демонстрации современных возможностей OpenType от компаний Monotype Imaging, FontFont и The Font Bureau. В них показаны различные виды типографского дизайна, доступные в современных шрифтах.

Вам не требуются особые шрифты для просмотра этих демонстраций. В операционной системе Windows 7 содержится ряд шрифтов с поддержкой OpenType, в том числе Calibri, Cambria, Consolas, Gabriola и Palatino Linotype. В Windows 8 Developer Preview мы добавили возможности OpenType в Segoe UI и веб-шрифты Arial, Verdana, Georgia, Times New Roman, Comic Sans и Trebuchet.

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

— Сильвен Галино (Sylvain Galineau), руководитель программы, Internet Explorer

Skip to main content