因為(wei)想為(wei)公司的產品定制(zhi)一(yi)套icon-font，把曾(ceng)經那些不易改變不易調校(xiao)大小(xiao)顏色的圖片改成圖標(biao)字(zi)體(ti)，經過搜索和試(shi)用，發現icon-font大致(zhi)有四類(lei)制(zhi)作(zuo)方法。這(zhe)四類(lei)方法的圖標(biao)生成原(yuan)理是一(yi)樣的，今(jin)天總結(jie)一(yi)下，希(xi)望對同學們(men)有幫助。

FontAwesome經歷了兩(liang)年的(de)進化，如今已成(cheng)為不少工具性應用(yong)開發者的(de)首選。但FontAwesome的(de)圖標畢竟有限，在某些(xie)(xie)特定(ding)的(de)情景中，FontAwesome的(de)字體并不能準確地傳達合(he)適(shi)的(de)意義(yi)。為自(zi)己的(de)WebApp定(ding)制(zhi)icon-font字體在某些(xie)(xie)時候(hou)就變成(cheng)了一種需(xu)要。

主要步驟：

步驟一

使(shi)用矢(shi)量圖形編輯器(qi)設計(ji)圖標，畫(hua)布(bu)最好設為512px*512px。以AdobeIllustrator為例，保(bao)存為svg格式時會彈出一(yi)個svg圖片屬性設置對話框。這時候(hou)請按下圖設置選(xuan)項：

上圖來自FilamentGroup

步驟二

將svg圖標文(wen)件導入(ru)Glyph字(zi)型排版工具編(bian)輯調校，生成(cheng)icon-font字(zi)體文(wen)件

步驟三

制(zhi)作與字型編(bian)碼匹配的CSS文件供網(wang)頁調用。

以(yi)下介紹的(de)四(si)大(da)類(lei)型的(de)icon-font制(zhi)作方法的(de)最大(da)分(fen)別(bie)在于(yu)第二(er)和第三步(bu)，也就是使用什么工(gong)具編輯(ji)和生成字(zi)體的(de)不(bu)同，及(ji)是否自動(dong)生成CSS文件的(de)區(qu)別(bie)。本文會(hui)忽(hu)略第三步(bu)CSS文件的(de)制(zhi)作的(de)過程，重點介紹第二(er)步(bu)的(de)差別(bie)和心(xin)得。

速(su)成(cheng)系：一步到位(wei)

在線icon-font生成器，比如icomoon.io或fontello+自(zi)制CSS文件

icomoon的icon-font生成器(qi)界面(mian)

IcoMoon和Fontello都(dou)支持(chi)直接拖拽svg格式的(de)圖(tu)標到網(wang)頁上傳圖(tu)標，即時(shi)在線(xian)預覽不同字號的(de)圖(tu)標字體(ti)(ti)效果，批量編輯圖(tu)標的(de)CSSclass名稱和Unicode編碼，以(yi)及下載為(wei)全套web字體(ti)(ti)及CSS文件，可(ke)謂相當方便。

倘若下(xia)載之后發現其中某個(ge)圖(tu)標(biao)的(de)名稱(cheng)或編碼需要(yao)(yao)修改，而icon-font生(sheng)成(cheng)(cheng)器已經(jing)被關閉，如果你(ni)需要(yao)(yao)編輯的(de)圖(tu)標(biao)不超過10個(ge)，那么恭喜你(ni)，你(ni)依然有機會(hui)在幾分鐘內完成(cheng)(cheng)圖(tu)標(biao)字體的(de)生(sheng)成(cheng)(cheng)。但是如果需要(yao)(yao)修改的(de)圖(tu)標(biao)太多，那么這種免費的(de)在線(xian)編輯器恐(kong)怕會(hui)成(cheng)(cheng)為(wei)你(ni)的(de)噩夢。

由此可見，免費的在線圖標編輯器只(zhi)適合小批(pi)量(liang)快速(su)的圖標編輯，圖標的質量(liang)取決于你在svg文件(jian)設計時的質量(liang)。

當然(ran)，如果(guo)你想使用在線(xian)的icon-font生成器服務于大型(xing)的圖(tu)標(biao)字體(ti)項目也不是不可以。icomoon就推出了Premium付費服務，你只需注冊并按使用期限(xian)付費，就可以在線(xian)保存(cun)icon-font編輯(ji)項目了。

速成系方法(fa)適合不擅長設計，想要快速獲得定制圖(tu)標庫的開發者。

尊貴系：專業級(ji)的(de)體驗(Mac)

矢量(liang)圖形編輯軟件(jian)(AdobeIllustrator)+Glyphs/GlyphsMini/FontLab+FontSquirrelWebFontGenerator+自制CSS文件(jian)

尊貴系，顧(gu)名思義，需要花費不少銀子才可以(yi)獲(huo)得正版使(shi)用(yong)權。

其中的(de)AdobeIllustrator不用多說，是(shi)矢量(liang)圖(tu)形(xing)設(she)計(ji)(ji)利器(qi)。自(zi)Adobe推出CC按月付費以(yi)來，設(she)計(ji)(ji)師(shi)對(dui)于Adobe軟(ruan)(ruan)件的(de)支(zhi)出便(bian)成了無(wu)底洞。雖然AffinityDesigner，Sketch等眾多支(zhi)持矢量(liang)圖(tu)形(xing)編輯(ji)的(de)軟(ruan)(ruan)件紛紛推出滿足一(yi)次性(xing)付費的(de)圖(tu)形(xing)編輯(ji)器(qi)市場的(de)需(xu)求。但是(shi)畢(bi)竟(jing)這些(xie)新(xin)應(ying)用或多或少(shao)還有一(yi)些(xie)Bug，穩(wen)定性(xing)短時(shi)間內難及Illustrator。當然，如果(guo)你對(dui)其他矢量(liang)圖(tu)形(xing)編輯(ji)軟(ruan)(ruan)件有信(xin)心，在(zai)這一(yi)步把AdobeIllustrator替換成其他你心儀的(de)圖(tu)標編輯(ji)軟(ruan)(ruan)件，甚至直接使用接下來介紹的(de)Glyphs制作(zuo)亦可。

Glyphs

Glyphs是一(yi)套專業級的字(zi)形編(bian)輯器，完整版的價(jia)格約(yue)人(ren)民幣(bi)2000元，支持直接(jie)在Glyphs里(li)創建矢量字(zi)形。GlyphsMini相比Glyphs主(zhu)要保留了SVG導入，字(zi)體(ti)命名及字(zi)體(ti)文件導出的功能，價(jia)格約(yue)為完整版的十(shi)分(fen)之一(yi)。

全套價格不(bu)菲，如果你(ni)已是Illustrator的(de)重度使(shi)用(yong)者，建議(yi)配合(he)(he)Glyphs使(shi)用(yong)。可視化(hua)的(de)節目適合(he)(he)專業(ye)字體(ti)設(she)計師(shi)，及不(bu)愁經費的(de)個人及團(tuan)隊。相比接下(xia)來要介紹的(de)開源系(xi)，Glyphs相信在字體(ti)編輯導出的(de)效率(lv)上會大(da)大(da)提高。

可(ke)用于轉換字體，導出不同(tong)格式的(de)字體文(wen)件

FontLab公司出品的一系列字體編(bian)輯轉換(huan)工(gong)具(ju)與Glyphs類似，FontLabStudio也(ye)是(shi)專業級的，支持Mac和Windows平臺。因為沒有(you)使(shi)用過，這里就(jiu)不(bu)贅述。

使用(yong)Glyphs導出icon字(zi)(zi)體(ti)文(wen)件后，可以使用(yong)FontSquirrel網站提(ti)供的(de)(de)Webfont生(sheng)(sheng)成(cheng)(cheng)器上傳由Glyphs導出的(de)(de).ttf格(ge)式字(zi)(zi)體(ti)，然后選擇默認(ren)的(de)(de)Optimal選項，最后“DownloadYourKit”，生(sheng)(sheng)成(cheng)(cheng)器就會默認(ren)生(sheng)(sheng)成(cheng)(cheng)包(bao)括(kuo).eot、svg、ttf、woff、stylesheet、css及(ji)Demo頁面(mian)的(de)(de)文(wen)件。不(bu)過icon-font字(zi)(zi)體(ti)有時無法正常在它生(sheng)(sheng)成(cheng)(cheng)的(de)(de)Demo頁面(mian)正常預(yu)覽(lan)到。這個FontSquirrel的(de)(de)字(zi)(zi)體(ti)生(sheng)(sheng)成(cheng)(cheng)器會更加(jia)適合英文(wen)字(zi)(zi)體(ti)的(de)(de)生(sheng)(sheng)成(cheng)(cheng)和排版效果預(yu)覽(lan)。

FOntSquirrelWebGenerator截圖

如(ru)果你想(xiang)高(gao)度定制導(dao)出的(de)WebFontKit的(de)文件類(lei)型，可以選擇Expert進行更(geng)多設(she)置

開源(yuan)系：尊(zun)貴系能做到(dao)的，我也可以(yi)，只是(shi)…(Windows/Linux/Mac)

InkScape+FontForge+FontSquirrelWebFontGenerator

不(bu)同于尊貴系，這一系的軟件全部是(shi)開源的，支持全平臺。

InkScape

一款開(kai)源的(de)矢量(liang)圖(tu)形(xing)編輯(ji)工具(ju)，點(dian)擊菜單欄Text>Glyph即可進入字型編輯(ji)面(mian)(mian)板。不(bu)(bu)同于Illustrator只能瀏覽，InkScape的(de)Glyph還可以將當前選中的(de)圖(tu)層(ceng)添加到為(wei)新(xin)的(de)Glyph。不(bu)(bu)過過程稍稍麻煩，這就是開(kai)源軟件的(de)不(bu)(bu)便之處(chu)。畢竟(jing)缺少(shao)組織性(xing)的(de)綜合產品設計規(gui)劃與(yu)開(kai)發，InkScape看(kan)似功能俱全，但界面(mian)(mian)圖(tu)標設計和易用性(xing)欠佳。

FontForge

一(yi)款開源(yuan)的(de)字體(ti)編輯(ji)工具，在(zai)(zai)windows和Linux上上有(you)(you)GUI版(ban)本，在(zai)(zai)Mac上可(ke)以通過命令行(xing)安裝(zhuang)。雖然(ran)功(gong)能上幾乎接近(jin)專業級的(de)收(shou)費軟件(jian)(jian)Glyph，可(ke)以導(dao)入(ru)svg文件(jian)(jian)，編輯(ji)字體(ti)信息(xi)，調整字型樣式(shi)，但是(shi)在(zai)(zai)體(ti)驗上真的(de)談不(bu)上方便，不(bu)少操(cao)作有(you)(you)些(xie)繁雜(za)，有(you)(you)一(yi)些(xie)明顯的(de)Bug。但它畢竟是(shi)開源(yuan)的(de)軟件(jian)(jian)，并且在(zai)(zai)2014年中重新(xin)開始了開發與更(geng)新(xin)。

竹林系：搞(gao)定(ding)命令行如有輕功(Mac/Linux)

矢量圖形(xing)編輯軟件(AdobeIllustrator)+FontCustom命令行

FontCustom網站(zhan)截圖

FontCustom

我嘗試用過兩次(ci)，第一(yi)次(ci)是(shi)在幾個(ge)月(yue)前，搜索(suo)icon-font制作指南時發現了放在Github上的開源項目FontCustom，但那是(shi)因為(wei)不是(shi)很明白這(zhe)類基于RubyGems的工具的安裝(zhuang)運行(xing)原理，所以沒有安裝(zhuang)成功。

第二(er)次(ci)嘗(chang)試是(shi)在今天，因(yin)為重(zhong)裝(zhuang)(zhuang)過(guo)Yosemite的(de)Mac系統(tong)，于是(shi)從零(ling)開始跟著安(an)裝(zhuang)(zhuang)指南安(an)裝(zhuang)(zhuang)了RubyGems，Brewhome，FontForge。據說只要(yao)運行一句命(ming)令(ling)行，程序會自動把(ba)存有svg源文(wen)(wen)件(jian)的(de)圖標自動生成為webfonts，同時會生成css文(wen)(wen)件(jian)和HTML預覽(lan)文(wen)(wen)件(jian)。

現(xian)有的一個icon-font庫Ionicons的目錄結構及Cheatsheet預覽頁面的樣式就同(tong)FontCustom非常相似。他們(men)都(dou)是基(ji)于Python的程(cheng)序自動生成的。

用戶可以自己在(zai)yml文件(jian)中設定模板(ban)生成參數(shu)，支持直接生成到指定路徑(jing)的文件(jian)夾，或是生成scss版本等。如果掌握了FontCustom命令行(xing)生成icon-font的方法(fa)，則無(wu)需依賴在(zai)線(xian)的icon-font生成器，可以在(zai)本地意見生成icon字體(ti)和全套的頁面文件(jian)。這(zhe)就使得圖標的修(xiu)改(gai)更新和預覽非常方便，也非常方便團隊協作。

但(dan)沒有(you)(you)什(shen)么是完美的。FontCustom雖然長遠看來十分方便(bian)，但(dan)是如果沒有(you)(you)命令行(xing)使用經驗(yan)，要(yao)自(zi)己安裝和上(shang)手(shou)是有(you)(you)些(xie)復(fu)雜的。

另(ling)外在安(an)(an)(an)裝(zhuang)fontCustom時用到了(le)一個listen的(de)package，安(an)(an)(an)裝(zhuang)時提(ti)示(shi)2.8.4的(de)版(ban)本503錯誤，最后是手(shou)動安(an)(an)(an)裝(zhuang)了(le)listen的(de)2.8.3的(de)版(ban)本，才得(de)以繼續FontCustom的(de)安(an)(an)(an)裝(zhuang)。

另外fontCustom在生(sheng)成文件(jian)的(de)(de)模板(ban)設定(ding)上還需要下一番功(gong)夫(fu)，才能(neng)讓生(sheng)成的(de)(de)文件(jian)版(ban)本、名稱(cheng)和結構稱(cheng)心如(ru)意(yi)。

小結

以(yi)上(shang)四(si)大(da)類(lei)的(de)icon-font生成方(fang)法適用(yong)于不同的(de)項目(mu)和人(ren)群(qun)，歡(huan)迎自(zi)行挑(tiao)選。尊貴系(xi)的(de)部分軟件因為沒(mei)有親自(zi)購買體驗(yan)，描述全靠印(yin)象。個人(ren)目(mu)前使(shi)用(yong)icon-font的(de)項目(mu)屬于長期需要優化修(xiu)改且需要團隊協作的(de)大(da)型(xing)web應用(yong)，所以(yi)個人(ren)選擇使(shi)用(yong)第四(si)種方(fang)案(an)，也就是FontCustom。

至于(yu)icon-font制作的第(di)一(yi)步(bu)，也就是(shi)SVGicon設計的部分(fen)其(qi)實也是(shi)一(yi)個很(hen)有學問的步(bu)驟，尤其(qi)當icon要面對(dui)不同(tong)字體(ti)的挑戰時，尤其(qi)是(shi)14px以(yi)下(xia)的字體(ti)時，有可能顯(xian)示不清(qing)或是(shi)有鋸(ju)齒，這就需要在(zai)圖形構思(si)方面下(xia)更多(duo)功夫(fu)。

今(jin)(jin)年最讓我喜歡的(de)(de)icon-font庫(ku)不是FontAwesome，而是Drift公司為旗下ionicFramework配套(tao)設計的(de)(de)icon-fontIonicons。今(jin)(jin)天的(de)(de)icon-font圖標研(yan)究少不了(le)對Ionicons2.0的(de)(de)文(wen)件(jian)結構(gou)的(de)(de)研(yan)究。從樣式上看(kan)，Ionicons或許也(ye)使用(yong)了(le)FontCustom生成字(zi)體，不過(guo)他們高度定制了(le)PythonScript，實現了(le)更(geng)加進階(jie)的(de)(de)諸如CheatSheet生成的(de)(de)功(gong)能(neng)。

最后，icon-font只是(shi)用(yong)于(yu)(yu)(yu)網站圖(tu)(tu)片(pian)(pian)展(zhan)示(shi)的方法之一，不見(jian)得適用(yong)于(yu)(yu)(yu)所有項目，尤其(qi)是(shi)基于(yu)(yu)(yu)Marketing的小型項目，有時直接使用(yong)svg或png圖(tu)(tu)片(pian)(pian)效率(lv)更高(gao)。