Что нам стоит фонт построить? Часть 2

Ранее я уже рассказывал, как делать собственные иконочные шрифты ^[1], и даже подробно прошелся по техническим нюансам ^[2]. Теперь настало время проявить заботу о пользователях. Итак, встречаем вторую версию фонтомаса ^[3], и смотрим улучшения.

^[3]

Удобства :)

Во-первых, глифы стали показываться шрифтами, а не китайской подделкой из рафаэля ^[4]. Разница огромна — качество сильно улучшилось за счет хинтинга. Теперь иконки выглядят именно так, как они получатся на вашем сайте.

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

Ну и конечно, теперь весь набор файлов генерируется в один клик. А в качестве приятного бонуса — готовый CSS-файл для бутстрапа и демо-страничка для локального просмотра.

Шрифты

Конечно же был добавлен Font Awesome ^[5], куда уж без него. Также была создана отдельная коллекция ^[6] для иконок мессенджеров и логинов, чтобы не бегать каждый раз за авторами с просьбой добавись асечку или одноглазников.

Еще в первой части ^[1] было высказано вполне справедливое замечание, что коды символов лучше мапить по стандарту. Это тоже было сделано. Кому не нравится — на странице скачивания можно отредактировать на свой вкус.

Так как вам могут понадобится иконки из разных шрифтов, была проделана работа, чтобы привести все к единой сетке. И обратите внимание, что иконки были выровнены не по baseline, а примерно по центру. Рядом с текстом это смотрится удачнее.

Разное

На самом деле нам надо было потестировать свой мегафреймворк и прочие библиотеки от нодеки ^[7] на реальном боевом проекте. Поэтому внутри у фонтеллы небольшой город, садик, пруд с рыбками, и шоколадная фабрика. Только этим можно объяснить, нафига было тянуть сюда node.js, гонять данные по вебсокетам, и делать онлайновый счетчик с живыми апдейтами. Ну, что выросло, то выросло.

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

Еще текущие генерируемые демки НЕ будут работать с IE7, так как иcпользуют :before. Но надо понимать, что это не совсем особенность фонтеллы. Как только появится красивое решение — подправим шаблоны и все станет хорошо. Dave Gandy (автор Font Awesome) обещал скоро выложить свой вариант фикса, вместе с обновленной версией своего шрифта.

Заключение

Исходные коды, как обычно, на гитхабе ^[8]. В трекере можно посмотреть всякие мелочи, которые будут решаться в рабочем порядке, и сообщить об ошибках. Также вам будет интересно почитать тикет 966 ^[9] проекта Twitter Bootstrap, где пасутся все разработчики, имеющие отношение к открытым иконочным шрифтам.

PS. Если есть желающие сделать для фонтеллы нормальный дизайн — пишите. Сами мы не местные, умеем только программировать.

PPS. А еще нужен технический писатель, помочь оформить документацию по всяким клёвым модулям ^[7], которые мы постояно добавляем для node.js

Автор: Vitaly