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

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

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

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

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

В любом случае, любая помощь с этим очень ценится. Я собираюсь получить 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.