Делаем свой шрифт для web разработки

Давненько ничего не писал, ну да ладно.
В данный момент занимаюсь web разработкой и встал вопрос о красивом меню. С анимацией, но без JS или Flash. Конечно, всё это делается силами CSS3, и в придачу не будем использовать картинки. Совсем.


Благодаря habrahabr попался на глаза урок, где реализовывалось меню только средствами CSS3 с полной анимацией и подгрузкой шрифта. Вот demo ну и картинки для ленивых

Урок отличный, анимации тоже, которые работают только в ведущих браузерах, таких как Chrome, Firefox, Opera. Но вот проблема - шрифт не содержал нужные мне элементы. Поискав по просторам интернета похожие шрифты, я был огорчён - их мало, сами они мало содержат в себе иконок, да ещё и большинство платные.

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

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

Немного справки - svg это формат векторной графики, основанный на xml, который поддерживается в общем всеми адекватными браузерами, позволяя запихать в себя шрифты, анимацию и ещё много чего прикольного. Почитать можно в Wikipedia или более фундаментальную базу по представленному формату на W3.

Работать будем в inkscape по туториалу.

Скачиваем тут ну или сразу с sourceforge. 

Запускаем, видим окно

Скачиваем заготовку и открываем её "Файл > Открыть..." (CTRL+O)

Открываем "Текст > Редактор шрифтов SVG...", появится справа панелька

Нажимаем на font 1, меняем на имя своего шрифта, например MySomeFont, правее поле *Гарнитура* очищаем.

Теперь открываем вкладочку *Глифы* всё на нашей панельке *Редактор шрифтов SVG*. Как мы видим, для нас уже добавили глифы английской раскладки. Можете все удалить, если мешаются, правой кнопкой мыши на них кликая. Так же можно редактирова имя глифа ну и символ, который он отождествляет 

Займёмся добавкой самих картинок. 

Импортируем "Файл > Импортировать..." (Ctrl+I) изображение, которое мы хотим включить в шрифт. Если это растровая грифика, после добавления нужно выполнить "Контур > Векторизовать растр" (Alt + Shift + B). Лично я в опциях не ковырялся, просто жмякаем на *OK* и создаётся уже векторное изображение. 

Растровое удаляем (Выделяем и нажимаем клавишу Delete) - внизу в строке при выделении объекта пишется, какой он - растровый (Изображение) или векторный (Контур). 

Далее растягиваем контур на рабочую область (в верхней панельке есть области ввода - x: 0, y: 0; Ш: 1000 и В: 1000). Оставляю контур выделенным, следуем в нашу любимую панельку *Редактор шрифтов SVG* во вкладочку *Глифы*. Теперь выделяем тот глиф, который мы хотим связать с нашим контуром. Пускай это будет глиф с символом *a*. Затем просто щёлкаем на кнопку *Получить кривые из выделения*. Чтобы проверить, всё ли мы правильно сделали, просто вводим добавленый символ в нижерасположенное поле *Текст* и должно отобразиться наше изображение. После проверки контур можно сдвинуть за рабочую область или удалить, он больше не нужен.

Так же мы можем ассоциировать все неиспользуемые символы в шрифте с каким либо контуром через *Взять из выделения* с текстом *Отсуствующий глиф* во вкладке *Глифы*. Операция проиходит как вышеописанная. 

В общем добавили мы все контуры к нашим символам. Теперь надо подредактировать сам XML файл немножко. Открываем *Редактор XML* (Shift+Ctrl+X) - кнопочка есть на главной панели - четвёртая справа. И нам нужно изменить атрибут *id* у пункта *<svg: font* на имя нашего шрифта, в моём случае это *MySomeFont*.

Теперь мы можем сохранить документ как обычный SVG - "Файл > Сохранить как..." (Shift+Ctrl+S) и использовать его в качестве шрифта в CSS3 через @font-face, например

@font-face {
    font-family: 'MySomeFont';
    src: url('fonts/font.svg') format('svg');
}

Так же наш SVG можно перегнать в другие форматы шрифтов, например в TTF с помощью сервиса onlinefontconverter.

Ну в общем в общем и всё.