В предыдущей заметке я рассказывал об инструменте для кастомизации иконочных шрифтов. Пока готовится вторая версия, поговорим о том, что творится у фонтомаса под капотом.
Наверняка многие из вас думают, что сделать иконочный шрифт — это какой-то rocket science. Ну, в исполнении дизайнеров, так оно и есть :). А теперь мы посмотрим на этот вопрос с точки зрения программистов. Популярность шрифта зависит не только от того, как он нарисован, а еще и от того, насколько им удобно пользоваться. И если найти дизайнера, который сделает векторную иконку, вполне реально, то засунуть это все в шрифт уже проблема. А уж «подкрутить» какой-нибудь глиф спустя пол года, когда дизайнера след простыл — совсем тоскливо. Наверное поэтому иконочные шрифты пока не получили широкого распространения — «очень сложно». И эту ситуацию мы пытаемся изменить.
Во время работы над фонтомасом пришлось столкнуться с тем, что у каждого дизайнера собственное «видение» насчет размера глифов, выравнивания и кодов символов. И для фонтомаса приходилось все шрифты приводить к единому знаменателю. Но требований становилось все больше, и в итоге получился набор скриптов, которые по развесистому конфигу могут делать все что надо, и даже больше. Теперь, имея векторные картинки, собрать свой собственный шрифт не проблема.
Процесс выглядит так:
Рисуем совуДобываем SVG-иконки- Берем фонтфорж и утаптываем SVG-иконки в ttf-шрифт
- Делаем хинтинг
- Конвертируем в остальные форматы
- Делаем CSS для бустрапа :)
- Делаем красивую демо-страничку
Прелесть в том, что все, кроме добывания иконок полностью автоматизируется.
Где взять эту магию?
Пока тут github.com/danielbruce/entypo. Отлаживалось все на шрифте Entypo, так как с его автором оказалось проще всего общаться.
Инструкции по установке и запуску в файле DEVELOPMENT.md. Картинки кидаются в папку `./src/svg`, правится конфиг и запускается `make`. После этого в папке `./font` оказываются собранные фонты, демо-страничка и CSS-файл для twitter bootstrap.
Рассмотрим поподробнее все шаги.
Генерация базового ttf-шрифта из векторных иконок
Тут все делается через fontforge, скриптом fontbuild.by. Все просто — из конфига всасываются глобальные параметры фонта, а потом импортируются SVG-изображения на место нужных глифов.
Файл конфигурации в формате yaml. Фактически JSON, но человекопонятный, и с возможностью расставлять комментарии. Секция `font` содержит глобальные параметры шрифта. Будете делать свой — видно что подкрутить. Названия переменных можно смотреть в fontforge api.
С глифами немного хитрее. Это массив хешей. Для каждого глифа задано указано имя файла (без расширения), код символа и имя для CSS. Можно добавить любую дополнительную информацию. Например, синонимы для поиска, если вы делаете проект вроде фонтомаса и вам понадобится подобное.
На что обратить внимание, когда готовите векторные картинки:
- При импорте изображение автоматически масштабируется на ВСЮ высоту глифа. Оптимально сделать для начала отступ по 10% сверху с снизу, иначе символы будут казаться слишком большими рядом с текстом. Это можно подогнать через CSS, но зачем, если можно сделать сразу хорошо?
- Иконочные шрифты — НЕ текстовые. Подумайте, возможно лучше будет выровнять символы не по baseline, а по середине строчных букв.
- Для идеального результата нужно будет «подвигать» некоторые глифы, визуально оценивая выравнивание.
- Иконочным шрифтам НЕ требуется кернинг, наклон и т.п. Поэтому при генерации шрифта пропущена куча параметров. Почти все фонтфорж проставляет автоматически. Впрочем, если хотите — добавляйте что угодно в секцию `font` конфига.
Хинтинг
Это такая хреновина для субпиксельного сглаживания, которая радикально улучшает качество изображения мелких пиктограмм. Хинтованные шрифты практически не уступают по качеству обычным картинкам. А на ретиновских дисплеях все вообще замечательно.
Наверное, лучше всего сходить на сайт программы ttfautohint, посмотреть ролик и почитать про алгоритмы. Если по-простому — хинтовать почти никто не умеет, а кто умеет — говорят, что ttfautohint-а хватает за глаза.
Обратите внимание, что по моей просьбе автор дорабатывал программу, чтобы она поддерживала иконочные шрифты (там нет букв, по которым вытягивается часть метрик для тектов). Эти изменения еще не вошли в релиз 0.8, поэтому используйте именно те исходники, которые идут со скриптами.
Конвертация в другие форматы
Итак, у нас теперь есть собственный зашибенный фонт в формате ttf, и надо его сконвертировать во все остальные, чтобы использовать на вебе. Со всем, кроме EOT, прекрасно справится фонтвордж. Смотрите исходник fontconvert.py. Для детища известных говноделов любителей стандартов есть открытая утилита ttf2eot. Под наши нужды подойдёт.
Делаем CSS
Так как искать коды глифов очень муторно, логично генерировать CSS автоматически. Для этого в конфиге есть дополнительные данные. По ним наш суперскрипт parse_template.py обрабатывает самый обычный mustache-шаблон, добавив немного магии. Тынц.
Остановимся на CSS поподробнее. Изначально была задумка мапить символы по стандарту Unicode 6.1, задавать все эскейп-последовательностями, а потом понтоваться модностью и современностью. Но жизнь внесла свои коррективы. По браузерам получается так:
- Firefox — он прекрасен, понимает в CSS все что надо в любом виде.
- Chrome — обламывается на 3-байтных эскейп-последовательностях вида `1Fxxx`, но срабытывает, если символ задавать кодом напрямую. Правда, для этого у CSS приходится указывать кодировку.
- Opera — полный капец. Недостатки хрома, плюс какие-то фатальные факапы с 3-байтными кодами. Такое впечатление, что там жестко зашиты разрешенные символы от старого юникода, и новые оно просто не в состоянии понять. Ну и до кучи, @font-face работает только через http.
Поэтому пришлось вместо прекрасного мапинга «по стандарту» перекинуть часть символов в Private Use Area. Правильные коды оставлены в комментариях, на случай если кто-то придумает, как разобраться с оперой.
Теперь про магию парсера темплейтов. В принципе, он читает конфиг «как есть», и передает его в шаблонизитор. Но по пути подкручивает пару вещей:
- Для глифов подкручивается шестнадцатеричная запись кода символа, плюс добавляется сам символ в виде кода
- Делается еще один массив — те же глифы, но напиленные по колонкам.
Демо-страница
Тот же принцип, что и для CSS. Исходник на мусташе, использует твитеровский бустрап. Парсер прежний.
Результат примерно такой. Надеюсь, данные скрипты облегчат жизнь людям, которые могут рисовать замечательные пиктограммы, но до сих пор не знали, как подступиться ко всему остальному.
Чем вы можете помочь
- Желательно написать инструкцию, как ставить все необходимое под маком и windows. Не знаю, как там принято работать и как удобнее. Да и под линукс стоит подрихтовать описание.
- Надо бы пошаманить с CSS, и попробовать решить опера-проблемы. Душа болит делать шрифты с кривой картой глифов.
- В принципе можно попробовать пошаманить с параметрами антиалиасинга, которые поддерживают некоторые браузеры, но по-моему смысла мало. Но если кто-то найдет время покрутить данный шрифт в разных операционках и разных размерах — буду рад.
- Если здесь есть люди, которые профессионально занимаются изготовлением шрифтов — проверьте пожалуйста сгенерированные файлы на валидность. В браузерах они показываются, но возможно стоит что-нибудь поменять во внутренних таблицах.
Репозиторий Entypo со скриптами находится здесь: github.com/danielbruce/entypo. Лицензия на сами скрипты — MIT.
В принципе, если будут желающие среди дизайнеров — можно сделать единый репозиторий для открытых иконок, и включить итоговый шрифт в фонтомас. Мало кому по силам сделать набор из 100500 пиктограмм, и потом их поддерживать. С другой стороны, с миру по нитке набирается очень быстро. Например, когда мы начинали делать фонтомас, было доступно всего 2 качественных иконочных шрифта (iconic & websymbols). Через месяц появился Entypo, а потом и FontAwesome. Наверное, с отдельными картинками может получиться так же. Ведь теперь процесс изготовления иконочных веб-шрифтов стал еще ближе к народу.
И напоследок, обратите внимание, что замечательный проект ttfautohint зависит от пожертвований. Буду рад, если вы тоже найдете возможность поддержать автора этой полезной утилиты.
Автор: Vitaly
