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

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

будет ли этот метод в конечном итоге означать создание одного набора шрифтов файла, который имеет каждый значок, назначенный символу? Поскольку этот метод настолько нов для меня, я действительно хочу убедиться, что я подхожу к нему правильно (я вижу большой потенциал... так намного лучше, чем создание разных значков, экспорт каждый как свой .png-файл для каждого цвета и размера).

Если это так, это займет немного запоминания (тем более, что у меня есть более 26 значков). Для тех, кто более опытен с fontforge, есть ли способ сказать определенное слово = символ?

кроме того, в отношении реализации этого на сайте. Затем мне нужно будет указать тип шрифта в классе/id css (т. е. font=icons; ). И тогда я мог бы изменить размер, цвет и т. д. с css также? Мужчина, если это правда. Хотел бы я узнать раньше... часами можно было спасти.

в любом случае, любая помощь с благодарностью. Я собираюсь получить fontforge и начать учиться (если есть лучшее бесплатное программное обеспечение для создания шрифтов, дайте мне знать). Надеюсь, это сработает.

23
fontforge fonts inkscape svg true-type-fonts

2 ответов

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

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

  1. откройте документ Inkscape, содержащий ваши проекты.
  2. убедитесь, что вы преобразовали все формы, тип и линии к путям и проверьте свой рисунок в режиме контура, чтобы быть уверенным. Если есть are проблемы, вы всегда можете вернуться к этому базовому файлу, чтобы внести начальные изменения в фигуры.
  3. создайте новый документ, выбрав New > fontforge_glyph.
  4. вставить значок из вашего дизайна в новый документ.
  5. измените размер значка в соответствии с предоставленным пространством (хотя, возможно, лучше всего сначала изменить размер всех значков в исходном проектном документе - на ваше усмотрение.)
  6. центрируйте значок на странице с помощью инструмента выравнивания (если это необходимо).
  7. сохранить рисунок как простые SVG (это проще, если вы название в соответствии с буквой, которая будет назначена, например. "Дж.СВГ").
  8. повторите для другой иконы.

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

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

  1. после того, как вы сделали SVG-файл для каждого значка, откройте FontForge и создайте новый документ FontForge.
  2. в главном окне списка отображения глифа дважды щелкните одну из букв / цифр, для которой у вас есть значок.
  3. в новом окне символ выберите > Импорт и выберите один из ваших SVG-файлов (вам, вероятно, придется изменить фильтр файлов в диалоговом окне файла, чтобы показать SVG-файлы).
  4. если импорт регистрирует ошибки, и каркас выглядит так, как будто он пострадал от небольшого взрыва, вам нужно будет вернуться в Inkscape, чтобы разобраться в пути. Существует простой способ узнать проблему, которая должна работать в большинстве случаев:
    • в Inkscape удалите заливку значка.
    • добавить тонкий штрих (1px будет делать).
    • преобразовать обводку путь.
    • результирующая форма, вероятно, будет отсутствовать часть вашего значка.
    • отменить все, затем разбить значок и перерисовать / трассировку / исправить проблемную область.

создание шрифта (с помощью FontForge)

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

  2. изменить следующий:

    • шрифт: MyFontMedium
    • фамилия: Мой Шрифт
    • имя для человека: Мой Шрифт Средний
    • вес: книга (Win XP думает средний = полужирный, поэтому лучше всего использовать книгу)

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

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

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

надеюсь, что это поможет.

52

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

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, проверить, что такое ID и включить его.

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

@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.

7