Создание шрифтов значков с векторным программным обеспечением (например, inkscape) и fontforge?

Ответ 1

Я успешно создал несколько значков для моих веб-сайтов и подход Inkscape FontForge, описанный в этом практическом руководстве, довольно прочный, и если вы используемый для использования программного обеспечения, такого как Inkscape, также довольно легко. Вот шаги, которые я предпринимаю:

Подготовка (с использованием Inkscape в этом примере)

• Откройте документ Inkscape, который содержит ваши проекты.
• Убедитесь, что вы преобразовали все формы, типы и линии в пути и убедитесь, что вы рисуете рисунок в режиме контура. Если есть проблемы, вы всегда можете вернуться к этому базовому файлу, чтобы внести первоначальные изменения в фигуры.
• Создайте новый документ, выбрав Новый > fontforge_glyph.
• Вставьте значок из вашего дизайна в новый документ.
• Измените размер значка в соответствии с предоставленным пространством (хотя лучше всего сначала изменить все значки в исходном проектном документе - до вас).
• Центрируйте значок на странице с помощью инструмента "Выравнивание" (при необходимости).
• Сохраните чертеж как простой SVG (проще, если заголовок соответствует букве, которая будет назначена, например, "j.svg" ).
• Повторите для других значков.

Я часто оставляю этот простой документ SVG открытым, вставляя новые значки и центрируя и определяя размер в соответствии с последним. Таким образом, размер и согласованность позиций в наборе значков (и вам не нужно постоянно выбирать каталог для сохранения простых SVG).

Создание глифов (с использованием FontForge)

• Как только вы создадите файл SVG для каждого значка, откройте FontForge и создайте новый документ FontForge.
• В главном окне списка отображения глифов дважды щелкните одну из букв/цифр, на которой есть значок.
• В этом новом окне глифа выберите Файл > Импорт и выберите один из ваших SVG файлов (вам, вероятно, потребуется изменить фильтр файлов в диалоговом окне файла, чтобы показать файлы SVG).
• Если импорт регистрирует ошибки и каркас выглядит так, как будто он подвергся умеренному взрыву, вам нужно вернуться к Inkscape, чтобы разобраться в пути. Там есть простой способ выяснить проблему, которая должна работать в большинстве случаев:
  • В Inkscape удалите заливку значка.
  • Добавьте тонкий ход (1px будет делать).
  • Преобразование штриха в путь.
  • Полученная форма, вероятно, не будет содержать часть вашего значка.
  • Отменить все, затем разбить значок и перерисовать/отследить/исправить проблемную область.

Создание шрифта (с использованием FontForge)

• Вернитесь в FontForge, как только вы добавите все свои значки, вам нужно дать вашему шрифту имя. В главном окне выберите Элемент > Информация о шрифте.

• Измените следующее:

  • Fontname: MyFontMedium
  • Фамилия: Мой шрифт
  • Имя для людей: мой средний шрифт
  • Вес: Книга (Win XP думает medium = bold, поэтому лучше всего использовать книгу)

• В главном окне выберите Файл > Сгенерировать шрифты и сохраните в TrueType (игнорируя любые ошибки).

Проверка/преобразование шрифта

• Перейдите в www.fontsquirrel.com/fontface/generator или аналогичную службу для загрузки вашего файла TTF и получите его преобразование (и исправленное)
• Загружаемый zip файл будет содержать точные инструкции о том, как внедрять шрифты в ваш веб-проект.

Надеюсь на помощь.

Ответ 2

Вот пример с открытым исходным кодом того, что вы хотите сделать:

http://fortawesome.github.com/Font-Awesome/

Если вы посмотрите на их код, вы можете увидеть, как запустить CSS:

https://github.com/FortAwesome/Font-Awesome/blob/master/css/font-awesome.css

И если вы хотите отредактировать шрифты, загрузите FontAwesome.ttf и отредактируйте в FontForge. Если вы хотите сделать свой собственный TTF, вы могли бы, но просто взгляните и скопируйте, как они это сделали, я думаю.

(Отказ от ответственности: я не выполнял эту часть процесса. В нашей команде один из парней использует проприетарное приложение для Mac, чтобы придумать шрифт. Если в будущем мне нужно будет создавать собственные шрифты значков, я буду скорее всего, используют Inkscape и FontForge. Я достаточно проверял, чтобы FontForge мог импортировать SVG, но я не пробовал его).

Когда вы закончите, и у вас есть свой TTF-шрифт по своему усмотрению, вам нужно преобразовать шрифт во множество разных форматов, необходимых для использования в качестве веб-шрифта. Я использую этот бесплатный онлайн-инструмент:

http://fontface.codeandmore.com/

..., который даст вам ваши файлы шрифтов EOT, SVG, TTF и WOFF, которые должны охватывать вас практически для всех браузеров. Затем вам необходимо включить эти файлы в свой CSS, как показано в файле, указанном выше. Примечание: для SVG файла есть идентификатор, который вам нужно будет обновить. Я думаю, что он автоматически выбирается инструментом преобразования, поэтому вам придется отредактировать SVG, проверить, что такое идентификатор и включить его.

Например, в этом коде:

@font-face {
  font-family: 'MyIcons';
  src: url('myiconfont-iconglyphs.eot');
  src: url('myiconfont-iconglyphs.eot#iefix') format('embedded-opentype'),
       url('myiconfont-iconglyphs.woff') format('woff'),
       url('myiconfont-iconglyphs.ttf')  format('truetype'),
       url('myiconfont-iconglyphs.svg#myiconfont-regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Возможно, вам придется изменить бит #myiconfont-regular после определения svg.