Учимся встраивать шрифты

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

Форматы шрифтов

Вообще говоря, на сегодняшний день в вашей системе  могут встретится только два формата: TrueType (с расширением .ttf) или OpenType (с  расширением .otf). Но не думайте, что  можно просто загрузить шрифт  и поставить на него ссылку. Вы столкнетесь  с двумя ограничениями:

1. лицензирование и
2. поддержка браузером

Лицензирование

Лицензирование  представляет особую трудность. Непросто найти шрифт, который хорошо вписывается  в общий дизайн. Поэтому приходится экспортировать изображения при  помощи sIFR или Cufon.

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

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

Поддержка обозревателем

Мы подошли  к следующему вопросу - о поддержке  шрифта обозревателем. Встроить шрифт TrueType или OpenType можно только в Firefox 3.5, Safari 3.1 и Opera 10. (В Chrome 2 эта функция включается параметрами командной строки.)

Это неплохо, но можно сделать еще лучше. Примемся теперь за Internet Explorer 4+, Chrome 0.3+, Opera 9+ - и даже Safari для мобильных устройств.

EOT

Internet Explorer поддерживает  особый формат, Embedded OpenType, который  позволяет задавать место и  способ встраивания. Шрифты TTF придется  преобразовывать в формат EOT. Microsoft разработал утилиту под названием WEFT, но она уже стара как мир и будь я проклят, если смогу заставить ее работать. К счастью, существует другая утилита для преобразования шрифтов, TTF2EOT, запускаемая из командной строки.

Файл OTF придется сперва преобразовать в формат TTF, и только затем - в EOT. Для этого  можно использовать приложение FontForge: оно дает самые устойчивые результаты. Преобразовать OTF в TTF с помощью этого приложения непросто, поэтому рекомендую посмотреть мой демо-ролик .

На следующем  шаге станет ясно, как можно воспользоваться файлом TTF.

SVG

Файлов TTF/OTF и EOT уже достаточно для большинства  обозревателей, но завершающим ударом станет еще один формат: SVG. Chrome 0.3+, а  также Opera 9 и iPhone OS 3.1(по словам очевидцев  из Твиттера) поддерживают шрифты SVG, не требуя дополнительных операций с командной строкой. По слухам, этот формат также поддерживается дополнительными обозревателями для мобильных устройств, но доказательств этому я не нашел.

В FontForge существует встроенная функция экспорта в формат SVG, но я заметил, что при ее использовании в Opera иногда пропадают буквы. Вместо этого (и к счастью!) я нашел Java-приложение Batik, запускающееся из командной строки. Перед преобразованием необходимо задать параметр ID. Если он не будет задан, программа все равно отработает правильно, но ID играет важную роль при работе с CSS.

 java -jar batik-ttf2svg.jar ./MuseoSans-500.ttf -o >> museo.svg -id museo

Одним из недостатков SVG является размер конечного файла. Я сразу заметил, что мой шрифт  размером 29 Кб стал занимать больше 100 Кб. Главной причиной тому было количество элементов hkern, предназначенных, как можно предположить, для кернинга. (Я гений, правда?) Их удаление не очень повлияет на отображение шрифта на экране - зато заметно уменьшит размер файла. Еще одна деталь: для каждого глиф-узла задана строчка glyph-name="null". Их тоже можно удалить, не меняя отображение шрифта. Вышеописанные процедуры позволяют сделать файл SVG даже меньше, чем первоначальный файл шрифта TrueType (29 и 20 Кб в одном случае и 18 и 12 Кб в другом).

CSS

Теперь у  нас на руках все три формата  — TTF (или OTF), EOT и SVG — и пришло время  перейти к магическим ритуалам CSS. На основе универсального кода Пола Айриша я создал свой вариант, добавив вставку для шрифта SVG.

@font-face { font-family: 'GothicCustom'; src: url("LeagueGothic.eot"); src: local('League Gothic'), url("LeagueGothic.svg#lg") format('svg'), url("LeagueGothic.otf") format('opentype'); }

Имя font-family здесь задано произвольно; как правило, я выбираю уникальные имена, чтобы в других случаях было видно, что применяется встроенный шрифт.

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

<font id="lg">

Параметр font-family работает, как обычно. Просто задайте имя шрифта, которое вы использовали в объявлении @font-face.

font-family: 'GothicCustom', 'Arial Narrow', sans-serif; 


Поднаборы

В демо-ролике я показывал, как удалить из шрифта неиспользуемые глифы. Зачем нужна эта процедура? Чтобы уменьшить размер файла. Файлы некоторых шрифтов могут занимать до 200 Кб. Это заметно влияет на скорость загрузки. Например, в заголовке этого сайта - на текущий момент - использован шрифт Museo Sans. Замечательный шрифт, весит около 65 Кб. В заголовке используются не все символы, поэтому лишние я удалил, тем самым уменьшив размер файла до 20 Кб.

Мы ведь оптимизируем изображения, так почему бы не оптимизировать шрифты?

Баг при конвертации  текста

При удалении лишних символов нужно иметь в  виду одну деталь. Принимаясь за дело, я решил, что смогу обойтись без  большинства глифов нижнего регистра. Для этого обычно применяют оператор text-transform:uppercase.

<div>About</div>   div { text-transform:uppercase; }

Он хорошо работает в Firefox и Safari, но Opera и Internet Explorer по неизвестной мне причине сначала  проверяют наличие нужного символа  в нижнем регистре. Не найдя его, они используют символы верхнего регистра резервного шрифта. Разумеется, это нас не устраивает.

С другой стороны, если вы твердо намерены удалить лишние глифы, можно просто преобразовать  весь HTML-код в верхний регистр.

Таблицы стилей для печати

Впервые начав  применять @font-face, я и не догадывался о дополнительном бонусе: настраиваемые шрифты замечательно работают с таблицами стилей для печати. Вам не приходится заменять текст картинкой и мириться со скучным встроенным шрифтом в печатном варианте. Только представьте, как приятно распечатывать страницу сайта и видеть то же, что и на экране!

Только  вперед!

Несмотря  на все свое раздражение, я пришел к выводу, что при необходимости  я скорее положусь на @font-face, чем на sIFR или Cufon. Во-первых, это позволит избежать использования JavaScript, во-вторых, извлечь выгоду из других преимуществ @font-face. Но я искренне надеюсь, что будущее избавит нас от этой головной боли.