2012-04-20 1 views
11

Я хотел бы создать шрифт значка для использования в веб-приложении. fontAwesome, Iconic, fontomas - примеры того, что я хотел бы сделать, но мне нужно использовать пользовательские значки. Я не знаю, с чего начать. Любая помощь приветствуется.Инструменты для создания значка Font

ответ

10

Inkscape - отличное бесплатное приложение для создания графики с векторами (из каких современных шрифтов сделаны).

FontForge - отличное бесплатное приложение для создания шрифтов и может импортировать SVG (отличный бесплатный векторный графический формат) от Inkscape.

+0

FontForge работал очень хорошо. Он мог легко установить его с помощью варева. Благодарю. – Rob

+0

Homebrew обманывает, это пойдет на вашу постоянную запись! : p – reisio

1

Rob, вы можете start here.

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

Существует также этот long post, где он импортирует свои векторы в FontLab. Недостатки FontLab - это цена в $ 649, а кривая обучения круче, чем Inkscape. Я также обнаружил, что FontLab не работает в моей OS X install.

На стороне записки:

Кто-то должно сделать программное обеспечение, предназначенное для решения этой задачи ...

2

Несмотря на то, что narkeeso сказал, шрифт имеет только один базовый уровень. Все ваши значки должны сидеть на этой линии, чтобы быть последовательными. Некоторые шрифты значков пытаются центрировать значки по вертикали, но это вызывает больше проблем, чем решает, и вы всегда можете отрегулировать вертикальное положение значка относительно окружающих символов, используя свойство vertical-align.

Я тестировал базовую линию в шаблоне в значительной степени для этой статьи, и она очень успешна в браузерах. Однако вы можете сопоставить X-height с общим шрифтом, таким как Arial. Это можно сделать в конвертере Font Squirrel.

17

Если вы еще не видели его уже, мой веб-приложение может помочь вам создать значок шрифты: http://icomoon.io/app

Вы можете импортировать свою собственную SVGs, или просмотреть библиотеку значка шрифта: http://icomoon.io/app/#library

+1

Это приложение действительно полезно и хорошо выполнено. Легко импортировать SVG и экспортировать шрифт, в комплекте с автоматически созданным CSS. – taudep

+0

Это приложение потрясающее! – Bema

+0

Почему я не могу создать 128x128 svg/png через приложение? –

1

ив использование приложение, называемое глифами (http://www.glyphsapp.com/), для создания шрифтов, а недавно появилось изображение значка для использования в Интернете. Я импортировал глификоны, поскольку они поставляются с бутстрапом, чтобы узнать, какие показатели они использовали. поэтому при 20px fontsize theyd соответствуют сетке лучше всего. и т. д.

У меня есть собственный скрипт для экспорта файла css, который создает все классы с прикрепленными юникодами. и другой скрипт python, который присваивает значения unicode пользовательским глифам (некоторые значки на самом деле являются частью юникода, например камеры, звонка и т. д.)

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

, но я, конечно, упростил несколько факторов.

fontlab не такой дружелюбный пользователь, и я не рекомендую его в основном по этой причине, но также и цену.glyphs предлагает мини-версию за 40 евро, которая должна охватывать функциональность, необходимую для создания значков.