因為想為公司的產(chǎn)品定制一套icon-font，把曾經(jīng)那些不易改變不易調(diào)校大小顏色的圖片改成圖標字體，經(jīng)過搜索和試用，發(fā)現(xiàn)icon-font大致有四類制作方法。這四類方法的圖標生成原理是一樣的，今天總結(jié)一下，希望對同學(xué)們有幫助。 FontAwesome經(jīng)歷了兩年的進化，如今已成為不少工具性應(yīng)用開發(fā)者的首選。但FontAwesome的圖標畢竟有限，在某些特定的情景中，F(xiàn)ontAwesome的字體并不能準確地傳達合適的意義。為自己的Web App定制icon-font字體在某些時候就變成了一種需要。
主要步驟： 步驟一 使用矢量圖形編輯器設(shè)計圖標，畫布最好設(shè)為512px*512px。以Adobe Illustrator為例，保存為svg格式時會彈出一個svg圖片屬性設(shè)置對話框。這時候請按下圖設(shè)置選項：
上圖來自Filament Group
步驟二 將svg圖標文件導(dǎo)入Glyph字型排版工具編輯調(diào)校，生成icon-font字體文件
步驟三 制作與字型編碼匹配的CSS文件供網(wǎng)頁調(diào)用。 以下介紹的四大類型的icon-font制作方法的最大分別在于第二和第三步，也就是使用什么工具編輯和生成字體的不同，及是否自動生成CSS文件的區(qū)別。本文會忽略第三步CSS文件的制作的過程，重點介紹第二步的差別和心得。
速成系 ：一步到位 在線icon-font生成器，比如icomoon.io（http://icomoon.io）或fontello（http://fontello.com/） + 自制CSS文件 icomoon的icon-font生成器界面 IcoMoon和Fontello都支持直接拖拽svg格式的圖標到網(wǎng)頁上傳圖標，即時在線預(yù)覽不同字號的圖標字體效果，批量編輯圖標的CSS class名稱和Unicode編碼，以及下載為全套web字體及CSS文件，可謂相當方便。 倘若下載之后發(fā)現(xiàn)其中某個圖標的名稱或編碼需要修改，而icon-font生成器已經(jīng)被關(guān)閉，如果你需要編輯的圖標不超過10個，那么恭喜你，你依然有機會在幾分鐘內(nèi)完成圖標字體的生成。但是如果需要修改的圖標太多，那么這種免費的在線編輯器恐怕會成為你的噩夢。 由此可見，免費的在線圖標編輯器只適合小批量快速的圖標編輯，圖標的質(zhì)量取決于你在svg文件設(shè)計時的質(zhì)量。 當然，如果你想使用在線的icon-font生成器服務(wù)于大型的圖標字體項目也不是不可以。icomoon就推出了Premium付費服務(wù)，你只需注冊并按使用期限付費，就可以在線保存icon-font編輯項目了。 速成系方法適合不擅長設(shè)計，想要快速獲得定制圖標庫的開發(fā)者。