- PVSM.RU - https://www.pvsm.ru -
В предыдущей заметке [1] я рассказывал об инструменте для кастомизации иконочных шрифтов. Пока готовится вторая версия, поговорим о том, что творится у фонтомаса под капотом.
Наверняка многие из вас думают, что сделать иконочный шрифт — это какой-то rocket science. Ну, в исполнении дизайнеров, так оно и есть :). А теперь мы посмотрим на этот вопрос с точки зрения программистов. Популярность шрифта зависит не только от того, как он нарисован, а еще и от того, насколько им удобно пользоваться. И если найти дизайнера, который сделает векторную иконку, вполне реально, то засунуть это все в шрифт уже проблема. А уж «подкрутить» какой-нибудь глиф спустя пол года, когда дизайнера след простыл — совсем тоскливо. Наверное поэтому иконочные шрифты пока не получили широкого распространения — «очень сложно». И эту ситуацию мы пытаемся изменить.
Во время работы над фонтомасом [2] пришлось столкнуться с тем, что у каждого дизайнера собственное «видение» насчет размера глифов, выравнивания и кодов символов. И для фонтомаса приходилось все шрифты приводить к единому знаменателю. Но требований становилось все больше, и в итоге получился набор скриптов, которые по развесистому конфигу могут делать все что надо, и даже больше. Теперь, имея векторные картинки, собрать свой собственный шрифт не проблема.
Процесс выглядит так:
Прелесть в том, что все, кроме добывания иконок полностью автоматизируется.
Пока тут github.com/danielbruce/entypo [4]. Отлаживалось все на шрифте Entypo, так как с его автором оказалось проще всего общаться.
Инструкции по установке и запуску в файле DEVELOPMENT.md [5]. Картинки кидаются в папку `./src/svg`, правится конфиг и запускается `make`. После этого в папке `./font` оказываются собранные фонты, демо-страничка и CSS-файл для twitter bootstrap.
Рассмотрим поподробнее все шаги.
Тут все делается через fontforge, скриптом fontbuild.by [6]. Все просто — из конфига всасываются глобальные параметры фонта, а потом импортируются SVG-изображения на место нужных глифов.
Файл конфигурации [7] в формате yaml. Фактически JSON, но человекопонятный, и с возможностью расставлять комментарии. Секция `font` содержит глобальные параметры шрифта. Будете делать свой — видно что подкрутить. Названия переменных можно смотреть в fontforge api [8].
С глифами немного хитрее. Это массив хешей. Для каждого глифа задано указано имя файла (без расширения), код символа и имя для CSS. Можно добавить любую дополнительную информацию. Например, синонимы для поиска, если вы делаете проект вроде фонтомаса и вам понадобится подобное.
На что обратить внимание, когда готовите векторные картинки:
Это такая хреновина для субпиксельного сглаживания, которая радикально улучшает качество изображения мелких пиктограмм. Хинтованные шрифты практически не уступают по качеству обычным картинкам. А на ретиновских дисплеях все вообще замечательно.
Наверное, лучше всего сходить на сайт программы ttfautohint [9], посмотреть ролик и почитать про алгоритмы. Если по-простому — хинтовать почти никто не умеет, а кто умеет — говорят, что ttfautohint-а хватает за глаза.
Обратите внимание, что по моей просьбе автор дорабатывал программу, чтобы она поддерживала иконочные шрифты (там нет букв, по которым вытягивается часть метрик для тектов). Эти изменения еще не вошли в релиз 0.8, поэтому используйте именно те исходники, которые идут со скриптами.
Итак, у нас теперь есть собственный зашибенный фонт в формате ttf, и надо его сконвертировать во все остальные, чтобы использовать на вебе. Со всем, кроме EOT, прекрасно справится фонтвордж. Смотрите исходник fontconvert.py [10]. Для детища известных говноделов любителей стандартов есть открытая утилита ttf2eot [11]. Под наши нужды подойдёт.
Так как искать коды глифов очень муторно, логично генерировать CSS автоматически. Для этого в конфиге есть дополнительные данные. По ним наш суперскрипт parse_template.py [12] обрабатывает самый обычный mustache-шаблон, добавив немного магии. Тынц [13].
Остановимся на CSS поподробнее. Изначально была задумка мапить символы по стандарту Unicode 6.1, задавать все эскейп-последовательностями, а потом понтоваться модностью и современностью. Но жизнь внесла свои коррективы. По браузерам получается так:
Поэтому пришлось вместо прекрасного мапинга «по стандарту» перекинуть часть символов в Private Use Area. Правильные коды оставлены в комментариях, на случай если кто-то придумает, как разобраться с оперой.
Теперь про магию парсера темплейтов. В принципе, он читает конфиг «как есть», и передает его в шаблонизитор. Но по пути подкручивает пару вещей:
Тот же принцип, что и для CSS. Исходник [14] на мусташе, использует твитеровский бустрап. Парсер прежний.
Результат примерно такой [3]. Надеюсь, данные скрипты облегчат жизнь людям, которые могут рисовать замечательные пиктограммы, но до сих пор не знали, как подступиться ко всему остальному.
Репозиторий Entypo со скриптами находится здесь: github.com/danielbruce/entypo [4]. Лицензия на сами скрипты — MIT.
В принципе, если будут желающие среди дизайнеров — можно сделать единый репозиторий для открытых иконок, и включить итоговый шрифт в фонтомас. Мало кому по силам сделать набор из 100500 пиктограмм, и потом их поддерживать. С другой стороны, с миру по нитке набирается очень быстро. Например, когда мы начинали делать фонтомас, было доступно всего 2 качественных иконочных шрифта (iconic & websymbols). Через месяц появился Entypo, а потом и FontAwesome. Наверное, с отдельными картинками может получиться так же. Ведь теперь процесс изготовления иконочных веб-шрифтов стал еще ближе к народу.
И напоследок, обратите внимание, что замечательный проект ttfautohint [9] зависит от пожертвований. Буду рад, если вы тоже найдете возможность поддержать автора этой полезной утилиты.
Автор: Vitaly
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/tipografika/4672
Ссылки в тексте:
[1] предыдущей заметке: http://habrahabr.ru/post/138748/
[2] фонтомасом: http://nodeca.github.com/fontomas/
[3] красивую демо-страничку: http://danielbruce.github.com/entypo/demo.html
[4] github.com/danielbruce/entypo: https://github.com/danielbruce/entypo
[5] DEVELOPMENT.md: https://github.com/danielbruce/entypo/blob/master/DEVELOPMENT.md
[6] fontbuild.by: https://github.com/nodeca/entypo/blob/master/bin/fontbuild.py
[7] Файл конфигурации: https://github.com/nodeca/entypo/blob/master/config.yml
[8] fontforge api: http://fontforge.sourceforge.net/python.html
[9] ttfautohint: http://www.freetype.org/ttfautohint/
[10] fontconvert.py: https://github.com/nodeca/entypo/blob/master/bin/fontconvert.py
[11] ttf2eot: http://code.google.com/p/ttf2eot/
[12] parse_template.py: https://github.com/nodeca/entypo/blob/master/bin/parse_template.py
[13] Тынц: https://github.com/nodeca/entypo/blob/master/src/css.mustache
[14] Исходник: https://github.com/nodeca/entypo/blob/master/src/demo.mustache
Нажмите здесь для печати.