Уголок CSS: использование всех возможностей шрифта
Благодаря поддержке правила CSS3 @font-face и формата упаковки шрифтов WOFF в различных браузерах современные средства веб-типографии далеко вышли за рамки шрифтов, которые можно использовать в Интернете. Известные журналы, такие как New Yorker, используют веб-шрифты для сохранения уникальности своих заголовков, а штаб избирательной кампании президента США Барака Обамы использует службу веб-шрифтов Typekit для размещения своего шрифта.
Одно ограничение не позволяет веб-дизайнерам использовать все возможности шрифта: отсутствие доступа к широкому спектру дополнительных возможностей OpenType®, встроенных во многие шрифты. Эти возможности определяют замену глифов и параметры позиционирования, необходимые для поддержки основных типографских функций, таких как кернинг, верхний и нижний индексы, контекстно-зависимые готовые формы письма, такие как лигатуры, числовые стили, доступ к альтернативным восточноазиатским глифам и декоративным элементам.
Например, «стилистический набор» OpenType, встроенный в шрифт Gabriola, позволяет отобразить следующий текст:
…как:
Последние обновления модуля 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