ICON-FONT圖標字體的四類制作方法

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

　　FontAwesome經歷了兩年的進化，如今已成為不少工具性應用開發者的首選。但FontAwesome的圖標畢竟有限，在某些特定的情景中，FontAwesome的字體並不能准確地傳達合適的意義。為自己的Web App定制icon-font字體在某些時候就變成了一種需要。

　　主要步驟：

　　步驟一

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

　　上圖來自Filament Group

　　步驟二

　　將svg圖標文件導入Glyph字型排版工具編輯調校，生成icon-font字體文件

　　步驟三

　　制作與字型編碼匹配的CSS文件供網頁調用。

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

　　速成系 ：一步到位

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

　　icomoon的icon-font生成器界面

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

　　倘若下載之後發現其中某個圖標的名稱或編碼需要修改，而icon-font生成器已經被關閉，如果你需要編輯的圖標不超過10個，那麼恭喜你，你依然有機會在幾分鐘內完成圖標字體的生成。但是如果需要修改的圖標太多，那麼這種免費的在線編輯器恐怕會成為你的噩夢。

　　由此可見，免費的在線圖標編輯器只適合小批量快速的圖標編輯，圖標的質量取決於你在svg文件設計時的質量。

　　當然，如果你想使用在線的icon-font生成器服務於大型的圖標字體項目也不是不可以。icomoon就推出了Premium付費服務，你只需注冊並按使用期限付費，就可以在線保存icon-font編輯項目了。

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

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

　　矢量圖形編輯軟件(Adobe Illustrator)+Glyphs/Glyphs Mini/FontLab + FontSquirrel WebFont Generator+ 自制CSS文件

　　尊貴系，顧名思義，需要花費不少銀子才可以獲得正版使用權。

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

　　Glyphs

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

　　全套價格不菲，如果你已是Illustrator的重度使用者，建議配合Glyphs使用。可視化的節目適合專業的字體設計師，及不愁經費的個人及團隊。相比接下來要介紹的開源系，Glyphs相信在字體編輯導出的效率上會大大提高。

　　FontLab TransType

　　可用於轉換字體，導出不同格式的字體文件

　　FontLab公司出品的一系列字體編輯轉換工具與Glyphs類似，FontLab Studio也是專業級的，支持Mac和Windows平台。因為沒有使用過，這裡就不贅述。

　　使用Glyphs導出icon字體文件後，可以使用Font Squirrel網站提供的Webfont生成器(www.fontsquirrel.com)上傳由Glyphs導出的.ttf格式字體，然後選擇默認的Optimal選項，最後“Download Your Kit”，生成器就會默認生成包括.eot、svg、ttf、woff、 stylesheet、css及Demo頁面的文件。不過icon-font字體有時無法正常在它生成的Demo頁面正常預覽到。這個Font Squirrel的字體生成器會更加適合英文字體的生成和排版效果預覽。

　　FOnt Squirrel Web Generator截圖

　　如果你想高度定制導出的WebFont Kit的文件類型，可以選擇Expert進行更多設置

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

　　InkScape + FontForge + FontSquirrel WebFont Generator

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

　　InkScape

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

　　FontForge

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

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

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

　　Font Custom網站截圖

　　Fontcustom

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

　　第二次嘗試是在今天，因為重裝過Yosemite的Mac系統，於是從零開始跟著安裝指南安裝了RubyGems，Brewhome，FontForge。據說只要運行一句命令行，程序會自動把存有svg源文件的圖標自動生成為webfonts，同時會生成css文件和HTML預覽文件。

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

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

　　但沒有什麼是完美的。FontCustom雖然長遠看來十分方便，但是如果沒有命令行使用經驗，要自己安裝和上手是有些復雜的。

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

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

　　小結

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

　　至於icon-font制作的第一步，也就是SVG icon設計的部分其實也是一個很有學問的步驟，尤其當icon要面對不同字體的挑戰時，尤其是14px以下的字體時，有可能顯示不清或是有鋸齒，這就需要在圖形構思方面下更多功夫。

　　今年最讓我喜歡的icon-font庫不是FontAwesome，而