Создание символьного шрифта в Inkscape
Символьный шрифт не имеет ничего общего с набором символов букв алфавита. Он состоит из знаков, которые невозможно прочесть и часто используется в качестве декоративного элемента. Для современных веб-разработчиков такой шрифт стал настоящим спасением от бесконечной рутины, с которой связана подготовка иконок (например, социальных сетей) для отображения на различных девайсах. Благодаря таким шрифтам больше не возникает необходимости сохраняться один и тот же символ в разном размере. Когда такой символ всего один — кажется ничего страшного. А если их несколько десятков?
При помощи CSS, можно менять цвет символьных шрифтов, чего нельзя сделать с обычными иконками. Также большим преимуществом является то, что такие иконки могут менять свой размер без потери качества. Последнее немаловажно для дисплеев c высоким разрешением, таких как Retina. К символьным шрифтам также можно применить различные текстовые эффекты (например, отбрасываемую тень). К тому же, их поддержку осуществляют большинство современных браузеров.
Существуют специальные сервисы-конструкторы, которые позволяют собрать свой собственный символьный шрифт из свободных иконок. Одним из таких сервисов является fontello. Но если вы не нашли нужных вам символов, их можно самостоятельно нарисовать в векторном графическом редакторе Inkscape и там же включить в свой собственный шрифт. Для этого нам понадобятся символы и Редактор шрифтов SVG. Для экономии времени, мы опустим процесс создания символов. Вместо этого, для примеров я буду использовать элементы символьного шрифта Entypo, распространяемого бесплатно под лицензией CC BY-SA 3.0. Итак, приступим к созданию шрифта.
1. Для начала нужно подготовить рабочую область. Нам понадобится открыть рабочие окна «Выровнять/расставить» (Объект > Выровнять и расставить…) и «Редактор шрифтов SVG» (Текст > Редактор шрифтов SVG).
2. В свойствах документа (Shift+Ctrl+D) необходимо установить ширину и высоту страницы в 1000px. Сами символы желательно привести к единому размеру (850px в высоту). Облегчить задачу поможет замок в настройках инструмента «Выделять и трансформировать объекты» (F1): закрыв его, высота и ширина объекта будут изменяться пропорционально.
Не исключено, что один из символов может оказаться шире всех остальных (при высоте 850px он может вылезти за кайму холста). В этом случае следует приравнять к 1000px ширину объекта. Очень важно, чтобы каждый символ располагался в пределах границ страницы.
3. Дальше нам потребуется выровнять первый символ по центру и нижнему краю страницы. Для этого, в окне «Выровнять и расставить» меняем ориентир на страницу. После этого выделяем объект и последовательно нажимаем на кнопки «Центрировать по вертикальной оси» и «Выровнять нижние края объектов» (см. картинку выше).
Если по ширине ваш символ равен 1000px, а по высоте оказался меньше, его нужно расположить на странице иным способом, чтобы символ не слишком выделялся на фоне остальных.
- Необходимо создать квадрат/прямоугольник (F4) высотой как все остальные символы — 850px.
- Поменять ориентир в окне «Выровнять и расставить» на «Последний выделенный».
- С помощью клавиши Shift сначала выделить символ, а затем созданный ранее квадрат.
- Центрировать символ по вертикальной и горизонтальной оси.
4. Если для создания шрифта вы импортировали объекты из других документов, как это сделала я, следует убедиться, что они не являются группами. И в случае необходимости разгруппировать импортируемые объекты (Ctrl+Shift+G). Редактор шрифтов SVG работает только с контурами.
Надеюсь, данные выше указания не вызвали особых проблем. К сожалению, дальше будет чуточку сложнее. Давайте перейдем к работе, непосредственно, в «Редакторе шрифтов».
1. Прежде чем привязывать символы к определенным буквам, следует создать шрифт. Для этого нужно нажать на кнопку «Создать» во вкладке «Шрифт». Выделив новый «шрифт 1», можно поменять его название («Гарнирута») и ширину.
2. Далее проследуем во вкладку «Глифы», где добавим новый глиф. Дважды кликнув по «глиф 1» можно изменить его название. Двойным кликом по «Соответствующей строке» необходимо установить букву алфавита (или цифру), которая будет соответствовать нашему символу. Для небольших шрифтов, советую использовать первые цифры или первые буквы алфавита.
3. Теперь выделяем наш символ вместе с созданным глифом и выбираем «Получить кривые из выделения». Это действие привяжет объект к выбранному глифу. Скорее всего, вы не увидите никаких изменений, несмотря на то, что в окне создания шрифта присутствует предварительный просмотр. Для того, чтобы увидеть элемент шрифта в действии, нужно в поле текст ввести пример текста, который будет содержать используемые шрифтом буквы или цифры.
4. Оставшиеся символы добавляем по аналогии. Во вкладке «Кернинг» можно поиграться с размером интервала между символами. После добавления желаемых символов в шрифт, следует сохранить документ. На этом наша работа в редакторе Inkscape завершена.
Далее нам нужно конвертировать получившийся SVG в формат шрифта True Type Font (.ttf). Для этого можно воспользоваться одним из онлайн-конвертеров: onlinefontconverter или freefontconverter, куда нужно загрузить получившийся SVG и выбрать желаемый формат.
На выходе мы получим обычный шрифт, который можно установить на своем компьютере. Но для того, чтобы получить веб-шрифт, подходящий для всех браузеров и устройств, следует обратиться к Web Font Generator. Загрузив файл шрифта и подтвердив легальность своих действий, мы получим архив со всеми необходимыми файлами. Теперь, ваш символьный шрифт готов к использованию на веб-страницах.
- Иконки используемые в туториале — Entypo
- Исходник урока «Создание символьного шрифта в Inkscape» (.zip архив)
Добавить комментарий