怒贊干貨！ICON-FONT圖標(biāo)字體的四類制作方法

因為想為公司的產(chǎn)品定制一套icon-font，把曾經(jīng)那些不易改變不易調(diào)校大小顏色的圖片改成圖標(biāo)字體，經(jīng)過搜索和試用，發(fā)現(xiàn)icon-font大致有四類制作方法。這四類方法的圖標(biāo)生成原理是一樣的，今天總結(jié)一下，希望對同學(xué)們有幫助。

FontAwesome經(jīng)歷了兩年的進(jìn)化，如今已成為不少工具性應(yīng)用開發(fā)者的首選。但FontAwesome的圖標(biāo)畢竟有限，在某些特定的情景中，F(xiàn)ontAwesome的字體并不能準(zhǔn)確地傳達(dá)合適的意義。為自己的WebApp定制icon-font字體在某些時候就變成了一種需要。

主要步驟：

步驟一

使用矢量圖形編輯器設(shè)計圖標(biāo)，畫布最好設(shè)為512px*512px。以AdobeIllustrator為例，保存為svg格式時會彈出一個svg圖片屬性設(shè)置對話框。這時候請按下圖設(shè)置選項：

上圖來自FilamentGroup

步驟二

將svg圖標(biāo)文件導(dǎo)入Glyph字型排版工具編輯調(diào)校，生成icon-font字體文件

步驟三

制作與字型編碼匹配的CSS文件供網(wǎng)頁調(diào)用。

以下介紹的四大類型的icon-font制作方法的最大分別在于第二和第三步，也就是使用什么工具編輯和生成字體的不同，及是否自動生成CSS文件的區(qū)別。本文會忽略第三步CSS文件的制作的過程，重點(diǎn)介紹第二步的差別和心得。

速成系：一步到位

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

icomoon的icon-font生成器界面

IcoMoon和Fontello都支持直接拖拽svg格式的圖標(biāo)到網(wǎng)頁上傳圖標(biāo)，即時在線預(yù)覽不同字號的圖標(biāo)字體效果，批量編輯圖標(biāo)的CSSclass名稱和Unicode編碼，以及下載為全套web字體及CSS文件，可謂相當(dāng)方便。

倘若下載之后發(fā)現(xiàn)其中某個圖標(biāo)的名稱或編碼需要修改，而icon-font生成器已經(jīng)被關(guān)閉，如果你需要編輯的圖標(biāo)不超過10個，那么恭喜你，你依然有機(jī)會在幾分鐘內(nèi)完成圖標(biāo)字體的生成。但是如果需要修改的圖標(biāo)太多，那么這種免費(fèi)的在線編輯器恐怕會成為你的噩夢。

由此可見，免費(fèi)的在線圖標(biāo)編輯器只適合小批量快速的圖標(biāo)編輯，圖標(biāo)的質(zhì)量取決于你在svg文件設(shè)計時的質(zhì)量。

當(dāng)然，如果你想使用在線的icon-font生成器服務(wù)于大型的圖標(biāo)字體項目也不是不可以。icomoon就推出了Premium付費(fèi)服務(wù)，你只需注冊并按使用期限付費(fèi)，就可以在線保存icon-font編輯項目了。

速成系方法適合不擅長設(shè)計，想要快速獲得定制圖標(biāo)庫的開發(fā)者。

尊貴系：專業(yè)級的體驗(Mac)

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

尊貴系，顧名思義，需要花費(fèi)不少銀子才可以獲得正版使用權(quán)。

其中的AdobeIllustrator不用多說，是矢量圖形設(shè)計利器。自Adobe推出CC按月付費(fèi)以來，設(shè)計師對于Adobe軟件的支出便成了無底洞。雖然AffinityDesigner，Sketch等眾多支持矢量圖形編輯的軟件紛紛推出滿足一次性付費(fèi)的圖形編輯器市場的需求。但是畢竟這些新應(yīng)用或多或少還有一些Bug，穩(wěn)定性短時間內(nèi)難及Illustrator。當(dāng)然，如果你對其他矢量圖形編輯軟件有信心，在這一步把AdobeIllustrator替換成其他你心儀的圖標(biāo)編輯軟件，甚至直接使用接下來介紹的Glyphs制作亦可。

Glyphs

Glyphs是一套專業(yè)級的字形編輯器，完整版的價格約人民幣2000元，支持直接在Glyphs里創(chuàng)建矢量字形。GlyphsMini相比Glyphs主要保留了SVG導(dǎo)入，字體命名及字體文件導(dǎo)出的功能，價格約為完整版的十分之一。

全套價格不菲，如果你已是Illustrator的重度使用者，建議配合Glyphs使用。可視化的節(jié)目適合專業(yè)字體設(shè)計師，及不愁經(jīng)費(fèi)的個人及團(tuán)隊。相比接下來要介紹的開源系，Glyphs相信在字體編輯導(dǎo)出的效率上會大大提高。

可用于轉(zhuǎn)換字體，導(dǎo)出不同格式的字體文件

FontLab公司出品的一系列字體編輯轉(zhuǎn)換工具與Glyphs類似，F(xiàn)ontLabStudio也是專業(yè)級的，支持Mac和Windows平臺。因為沒有使用過，這里就不贅述。

使用Glyphs導(dǎo)出icon字體文件后，可以使用FontSquirrel網(wǎng)站提供的Webfont生成器上傳由Glyphs導(dǎo)出的.ttf格式字體，然后選擇默認(rèn)的Optimal選項，最后“DownloadYourKit”，生成器就會默認(rèn)生成包括.eot、svg、ttf、woff、stylesheet、css及Demo頁面的文件。不過icon-font字體有時無法正常在它生成的Demo頁面正常預(yù)覽到。這個FontSquirrel的字體生成器會更加適合英文字體的生成和排版效果預(yù)覽。

FOntSquirrelWebGenerator截圖

如果你想高度定制導(dǎo)出的WebFontKit的文件類型，可以選擇Expert進(jìn)行更多設(shè)置

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

InkScape+FontForge+FontSquirrelWebFontGenerator

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

InkScape

一款開源的矢量圖形編輯工具，點(diǎn)擊菜單欄Text>Glyph即可進(jìn)入字型編輯面板。不同于Illustrator只能瀏覽，InkScape的Glyph還可以將當(dāng)前選中的圖層添加到為新的Glyph。不過過程稍稍麻煩，這就是開源軟件的不便之處。畢竟缺少組織性的綜合產(chǎn)品設(shè)計規(guī)劃與開發(fā)，InkScape看似功能俱全，但界面圖標(biāo)設(shè)計和易用性欠佳。

FontForge

一款開源的字體編輯工具，在windows和Linux上上有GUI版本，在Mac上可以通過命令行安裝。雖然功能上幾乎接近專業(yè)級的收費(fèi)軟件Glyph，可以導(dǎo)入svg文件，編輯字體信息，調(diào)整字型樣式，但是在體驗上真的談不上方便，不少操作有些繁雜，有一些明顯的Bug。但它畢竟是開源的軟件，并且在2014年中重新開始了開發(fā)與更新。

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

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

FontCustom網(wǎng)站截圖

FontCustom

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

第二次嘗試是在今天，因為重裝過Yosemite的Mac系統(tǒng)，于是從零開始跟著安裝指南安裝了RubyGems，Brewhome，F(xiàn)ontForge。據(jù)說只要運(yùn)行一句命令行，程序會自動把存有svg源文件的圖標(biāo)自動生成為webfonts，同時會生成css文件和HTML預(yù)覽文件。

現(xiàn)有的一個icon-font庫Ionicons的目錄結(jié)構(gòu)及Cheatsheet預(yù)覽頁面的樣式就同F(xiàn)ontCustom非常相似。他們都是基于Python的程序自動生成的。

用戶可以自己在yml文件中設(shè)定模板生成參數(shù)，支持直接生成到指定路徑的文件夾，或是生成scss版本等。如果掌握了FontCustom命令行生成icon-font的方法，則無需依賴在線的icon-font生成器，可以在本地意見生成icon字體和全套的頁面文件。這就使得圖標(biāo)的修改更新和預(yù)覽非常方便，也非常方便團(tuán)隊協(xié)作。

但沒有什么是完美的。FontCustom雖然長遠(yuǎn)看來十分方便，但是如果沒有命令行使用經(jīng)驗，要自己安裝和上手是有些復(fù)雜的。

另外在安裝fontCustom時用到了一個listen的package，安裝時提示2.8.4的版本503錯誤，最后是手動安裝了listen的2.8.3的版本，才得以繼續(xù)FontCustom的安裝。

另外fontCustom在生成文件的模板設(shè)定上還需要下一番功夫，才能讓生成的文件版本、名稱和結(jié)構(gòu)稱心如意。

小結(jié)

以上四大類的icon-font生成方法適用于不同的項目和人群，歡迎自行挑選。尊貴系的部分軟件因為沒有親自購買體驗，描述全靠印象。個人目前使用icon-font的項目屬于長期需要優(yōu)化修改且需要團(tuán)隊協(xié)作的大型web應(yīng)用，所以個人選擇使用第四種方案，也就是FontCustom。

至于icon-font制作的第一步，也就是SVGicon設(shè)計的部分其實也是一個很有學(xué)問的步驟，尤其當(dāng)icon要面對不同字體的挑戰(zhàn)時，尤其是14px以下的字體時，有可能顯示不清或是有鋸齒，這就需要在圖形構(gòu)思方面下更多功夫。

今年最讓我喜歡的icon-font庫不是FontAwesome，而是Drift公司為旗下ionicFramework配套設(shè)計的icon-fontIonicons。今天的icon-font圖標(biāo)研究少不了對Ionicons2.0的文件結(jié)構(gòu)的研究。從樣式上看，Ionicons或許也使用了FontCustom生成字體，不過他們高度定制了PythonScript，實現(xiàn)了更加進(jìn)階的諸如CheatSheet生成的功能。

最后，icon-font只是用于網(wǎng)站圖片展示的方法之一，不見得適用于所有項目，尤其是基于Marketing的小型項目，有時直接使用svg或png圖片效率更高。