@font-face — подготавливаем шрифты вручную

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

В простейшем случае можно просто подключить этот шрифт через @font-face, так как современные браузеры понимают большинство форматов (ttf,otf,woff).

А если нужно, чтобы шрифт отображался в IE8 как в макете, то в этом случае придется конвертировать шрифт, так как этот браузер понимает только собственный формат — eot.

Но это не единственный случай, когда надо конвертировать шрифт. Некоторые шрифты имеют большой размер (например, Segoe Script весит 605 Кб), так как содержат в себе кучу иероглифов.

В этом случае, так же не помешает сконвертировать шрифт, чтобы избавиться от ненужных символов и уменьшить размер файла.

Самым популярным сервисом для конвертации шрифта является Font-Face Generator.

Я сам им долго пользовался, но меня он не устраивает, так как у него есть 3 недостатка:

1. Не генерирует платные шрифты.
2. Очень часто сгенерированный шрифт сильно отличается от оригинала (как начертание, так и межстрочный интервал).
3. Размер файла не должен превышать 1 Мб, иначе файл не загружается для конвертации.

Столкнувшись с этими проблемами, я решил найти альтернативный способ конвертации шрифтов.

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

После некоторого поиска, была найдена замечательная программа для наших целей — FontLab Studio (так же, подойдет программа TypeTool, которая является урезанной версией FontLab Studio). Программа платная, но для проверки функционала пойдет и демо-версия, которая добавляет водяные знаки к символам шрифта. Можно, также поискать и кряк.

В качестве примера подготовим для верстки шрифт «Myriad Pro Condensed«, который не конвертируется сервисом Font-Face Generator. Обычно этот шрифт устанавливается вместе с фотошопом.

В случае другого шрифта, которого у вас нет, а дизайнер его не предоставил, рекомендую искать в гугле, запросом «index of название шрифта». В этом случае, если шрифт популярный, то гугл выдаст ссылки, ведущие не на сайт, как обычно, а в директории, где можно напрямую скачать шрифт.

И так, шрифт у нас есть. Теперь заупскаем FontLab Studio (у меня версия 5.0.4, версии ниже были глючными) и открываем наш шрифт. Окно программы будет выглядеть примерно так:

fontlab_1

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

fontlab_2

Чтобы узнать какие символы можно безболезненно удалить, выставляем кодировку «MS Mindows 1251 Cyrillic». При этом, символы, которые входят в нашу кодировку перегруппируются и подсветятся желтыми заголовками.

Остальные символы, которые идут после буквы «я», можно выделить и удалить:

fontlab_3

Подтверждаем удаление. После этих действий лишних символов у нас больше нет:

fontlab_4

Теперь надо привести набор имен шрифта к одному названию через меню «File > Font Info» (Ctrl+Alt+F) здесь:

fontlab_5

И здесь (если поля в этом окне пустые, то оставляем их как есть):

fontlab_6

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

Теперь сохраняем наш шрифт через меню «File > Generate Font» (Ctrl+Alt+G). Тип файла указываем «TrueType/OpenType TT (*.ttf)»:

fontlab_7

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

Полученный файл myriadpro-cond.ttf еще не готов для дальнейших манипуляций, так как содержит ошибки и его нужно пересохранить. То есть, открываем этот файл в FontLab Studio, жмем Ctrl+Alt+G и опять сохраняем как «TrueType/OpenType TT (*.ttf)». Можно перезаписать его же сверху.

К необходимости повторного сохранения я пришел опытным путем. Так как, иногда, после удаления лишних символов и одноразовым сохранением, шрифт оказывался не рабочим в некоторых браузерах и не конвертировался в eot.

Если вы заметили, то исходный шрифт был в формате otf, а мы его сохранили как ttf. Объясняется это просто, если из исходного шрифта вырезать ненужные символы и попробовать его сохранить в формате otf, то программа ругнется и не сохранит шрифт. А в формате ttf сохраняет. В формате otf можно сохранить уже обработанный нами выше ttf.

А какая, собственно, разница между форматами ttf и otf?

С точки зрения верстки я вижу только 2 разницы:

1. В формате otf шрифт весит меньше, чем такой же, но в формате ttf.
2. Шрифт в формате otf — сглаженный, а в ttf — нет.

ttfttf otfotf

Получается, что формат otf предпочтителен, нежели ttf? Да, но только для текста с большим размером кегля, например для заголовков. А вот мелкий текст в формате otf уже смазывается и хуже читается, поэтому для мелкого текста лучше использовать ttf. В примере ниже это будет видно.

При желании можно даже один и тот же шрифт подключить в обоих форматах.

С ttf и otf для нормальных браузеров разобрались. Теперь нам нужен шрифт в формате eot для IE8 (IE6, IE7, также понимают его).

Конвертировать шрифт из ttf в eot можно программой eotfast или ttf2eot. Я пользуюсь eotfast, так как на выходе она дает файл меньшего размера.

Обе программы консольные, и имеют одинаковый синтаксис: eotfast(ttf2eot) input.ttf output.eot

Есть еще программа WEFT от Microsoft. Но она крайне невразумительная.

Двух файлов шрифта (ttf и eot) вполне достаточно чтобы отобразить нестандартный шрифт в браузере. В то время как сервисы наподобие Font-Face Generator, генерируют до 4-х файлов. Из них svg формат шрифта нужен был для старой версии iOS 3.1. А woff — современный формат шрифта для веба. Но в нем также, ни вижу смысла.

Остается подключить наши шрифты к верстке и проверить что получилось. Подключить шрифты можно так:

@font-face {
    font-family: ‘MyriadPro-Condensed’;
    src: url(‘myriadpro-cond.eot’);
    src: url(‘myriadpro-cond.eot?#iefix’) format(‘embedded-opentype’), url(‘myriadpro-cond.ttf’) format(‘truetype’);
    font-weight: normal;
    font-style: normal;
}

Пример

Вышеописанной процедуры по подготовке шрифта достаточно в большинстве случаев.

Но бывают случаю, когда шрифт, конвертируемый в формат EOT оказывается нерабочим. Одной из причин является неправильное оформление самого шрифта. Так было со шрифтом UkrainianJikharev

Как выяснилось опытным путем, проблема была в том, что у этого шрифта отсутствовала информация о поддерживаемых кодировках:

fontlab_8

Добавление кодировок решило проблему, шрифт стал рабочим в IE, после конвертации в eot.

fontlab_9

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

autohint

На рисунке выше заметно, что высота букв «т,м,г» меньше остальных. Это связано с погрешностью автохинтинга.

Эта проблема решается с помощью программы ttfautohint. Нужно просто прогнать наш шрифт через нее:

ttfautohint

Но нужно иметь в виду, что шрифт, обработанный этой программой, будет немного отличаться от первоначального вида.

Программа и описание проблемы здесь

На этом все, я рассказал все, что знаю про подготовку шрифта для верстки.

Рубрика: CSS/HTML | Метки: , , , , | Добавить комментарий