Icon-font圖標(biāo)字體的四類制作方法

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