2012-04-20 62 views
11

我想創建一個圖標字體以用於Web應用程序。 fontAwesome,Iconic,fontomas是我想要做的例子,但我需要使用自定義圖標。我不知道從哪裏開始。任何幫助表示讚賞。創建圖標字體的工具

回答

10

Inkscape是一個很棒的免費應用程序,用於創建帶有矢量圖形的圖形(由現代字體組成)。

FontForge是一個很棒的免費創建字體的應用程序,並且可以從Inkscape導入SVG(一個很棒的免費矢量圖形格式)。

+0

Fontforge工作得很好。能夠使用brew相當容易地進行安裝。謝謝。 – Rob 2012-04-24 19:06:48

+0

Homebrew作弊,這將永久記錄! :p – reisio 2012-04-24 19:10:27

1

Rob,你可以start here

這不是最好的例子,它提到的模板有點過時了。您必須通過根據字體基線在畫布周圍移動圖標來進行試驗。

還有這個long post他將他的載體輸入到FontLab中。 FontLab的缺點是649美元的價格,它的學習曲線比Inkscape陡峭。我還發現FontLab在我的OS X安裝上是越野車。

在一個側面說明:

有人需要使軟件專門從事這項任務......

2

儘管什麼narkeeso說,字體只有一個基線。所有的圖標都應該保持一致。某些圖標字體嘗試垂直居中放置圖標,但這會產生比解決問題更多的問題,並且您始終可以使用vertical-align屬性來調整圖標相對於周圍字符的垂直位置。

我在該模板中大量測試了模板中的基準,並且它在各個瀏覽器中都非常成功。但是,您可能希望將X高度與Arial等常用字體相匹配。這可以在Font Squirrel轉換器中完成。

17

如果您還沒有看到它已經,我的web應用程序可以幫助你生成圖標字體:http://icomoon.io/app

您可以導入自己的SVGs,或瀏覽圖標字體庫:http://icomoon.io/app/#library

+1

這個應用程序非常有用,並且執行得很好。易於導入SVG並導出字體,並自動生成CSS。 – taudep 2013-03-30 03:42:49

+0

這個應用程序真棒! – Bema 2013-06-03 13:20:43

+0

爲什麼我不能通過應用程序生成128x128 svg/png? – 2014-12-27 08:03:41

1

我一直都使用一個名爲字形的應用程序(http://www.glyphsapp.com/)來創建字體,並且最近有一個圖標字體供網站使用。我導入glyphicons,因爲他們帶有引導程序來查看他們使用的度量標準。所以在20px字體大小theyd匹配網格最好。等等

我有一個自定義腳本導出一個css文件,創建所有類與附加的unicodes。而另一個Python腳本asignes Unicode值自定義字形(一些圖標實際上是統一的一部分,像攝像頭,鈴聲,和類似的東西)

後,我不得不使用的字體松鼠的Web字體轉換壽, 我已經與開發人員聯繫,他表示他正在實施webfont導出。更新是免費的,但他還沒有包括直接webfont導出。 所以它總是有點麻煩,讓字體從應用程序進入瀏覽器。

但我確實已精簡了幾個因素。

fontlab不是用戶友好的,我不能推薦它主要出於這個原因,但也價格。glyphs提供了40歐元的迷你版本,應該涵蓋圖標生成所需的功能。