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

Question

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

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

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

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

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

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

37

svg fonts inkscape fontforge true-type-fonts

Источник

user1066982 09 сен '12 в 03:56

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.

8

Источник

user180995 11 окт '12 в 02:48

Другие вопросы по тегам svg fonts inkscape fontforge true-type-fonts

user1153783 29 ноя '12 в 21:45 2012-11-29 21:45 · Accepted Answer · 2012-11-29 21:45

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

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

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

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

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

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

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

Вернувшись в FontForge, после того, как вы добавили все свои значки, вам нужно дать название вашей гарнитуре. В главном окне выберите Элемент> Информация о шрифте.
Измените следующее:
- Шрифт: MyFontMedium
- Фамилия: Мой шрифт
- Название для людей: My Font Medium
- Вес: Книга (Win XP считает средний = жирным, поэтому лучше использовать Книгу)
В главном окне выберите " Файл"> "Создать шрифты" и сохраните в TrueType (игнорируя любые ошибки).

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

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

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