隨著手機屏幕分辨率的提升，對移動端網(wǎng)頁圖片精度的要求也逐漸提升。以往采用圖片形式的圖標(biāo)，尺寸的足夠大才能保證高PPI下顯示效果足夠清晰。同時，不知何時，字體圖標(biāo)漸漸興起。所謂字體圖標(biāo)就是把圖標(biāo)做成字體，在網(wǎng)頁中可以和文字一樣，用CSS賦給字號、顏色、陰影等，想放多大就多大。優(yōu)勢不言而喻。

　　近些年，公司轉(zhuǎn)型，開始做基于Html5的移動端Web開發(fā)。之前一直使用網(wǎng)上免費提供的字體圖標(biāo)庫，但免不了碰到個性化的需求，因此前段時間，抽空研究了一下如何自行制作字體圖標(biāo)。網(wǎng)上教程很多，不過大多挺復(fù)雜的，需要安裝一些軟件工具。本人折騰了半天，總算摸索出了一套簡單的方法，現(xiàn)在在這里分享給大家：

　　基本思路：一、制作圖標(biāo) → 二、生成圖標(biāo)字體 → 三、用CSS把字體引入網(wǎng)站。

　　工具：

　　1、Adobe Illustrator，版本不限，需要能將文件存為SVG格式即可(其他能制作SVG格式的軟件應(yīng)該也可以，我沒試過);

　　2、壓縮工具，支持ZIP格式(基本上是個壓縮工具都支持)。

　　另外確保電腦能上網(wǎng)。

具體的制作步驟如下：

　　1、在AI中新建文檔，寬高均為512像素，如下圖(不要問我為啥是512px，我也不知道，我試了幾次后算出來的，只有這個尺寸和網(wǎng)頁里的字號是對的上的);

　　2、在文檔中畫圖標(biāo)，用鋼筆還是圖形工具隨意，但要注意顏色為黑色，背景為空，也不能有漸變，半透明啥的。如下圖(原則上圖形的描點要盡可能少，同時盡量在一個路徑里完成整個圖標(biāo)，四邊根據(jù)設(shè)計情況選擇是否留空，保證所有圖標(biāo)在視覺上大小的均衡，以及風(fēng)格的統(tǒng)一);

　　3、畫完后保存，保存時要選擇SVG格式，這是重點，如下圖。SVG選項默認(rèn)的就好(我的默認(rèn)的是1.1版本)，另外命名和圖標(biāo)要匹配，用英文，懶的話用拼音，至少保證自己認(rèn)得哪個是哪個。多個單詞用"-"代替空格(svg文件可以在瀏覽器里打開查看哦);

　　SVG文件在谷歌瀏覽器中查看的效果

　　4、重復(fù)以上步驟，把需要的圖標(biāo)都畫出來保存成SVG文件，并放在同一個文件夾里，給文件夾命好名，如下圖。

　　這里只做三個做示例。實際做時建議兩個或兩個以上。只有一個的話是不生成CSS和html文件的。

　　5、將此文件夾壓縮為zip文件。

　　6、訪問地址：http://iconvau.lt/app(稍有些慢，還請耐心等待。這個網(wǎng)站很厲害，直接把后兩大步包辦了)，進入后會看到如下界面，將zip文件拖入到紅框范圍中(也可點擊紅框范圍，選擇zip文件)，耐心等待文件上傳并轉(zhuǎn)換，別關(guān)瀏覽器。字體轉(zhuǎn)換完成后會自動下載一個名為iconvault.zip的文件，沒有自動下載可以點網(wǎng)站中出現(xiàn)的鏈接進行下載(壓縮包放在附件里供大家參考)。

　　7、解壓iconvault.zip文件，能看以下文件(可以開啟后綴名查看文件類型)：.fontcustom-data可以刪除，eot、svg、ttf、woff這四個是字體文件，分別兼容不同的平臺。一個CSS文件，以及一個html文件。用瀏覽器打開html文件，可以看到你設(shè)計的全部圖標(biāo)，以不同的字號排列在里面。

　　用瀏覽器打開html文件能看到的內(nèi)容

　　對于強迫癥來說，這么長的文件名會讓人抓狂的，那么打開css文件，在頂端找到幾個字體文件的名稱，改掉，然后再改掉相應(yīng)字體文件的名稱即可。

　　網(wǎng)站的引入，html文件是很好的示例，懂點html和CSS的看看就知道了。引入CSS樣式后，只要在網(wǎng)頁里寫這樣就行了，和文字一樣，賦給相應(yīng)的樣式，就會有相應(yīng)的效果。

　　到這里字體圖標(biāo)的制作就算完成了，生成的字體圖標(biāo)較小號時在電腦上瀏覽會有些許瑕疵，這是因為制作圖標(biāo)時沒有考慮小分辨率的情況，就像過于小號的文字顯示也會不理想一樣，這需要進行精細(xì)的適配。但在高PPI的手機屏幕上瀏覽就沒有問題了。當(dāng)然，更加豐富多彩的圖標(biāo)，目前依舊只能依賴圖片。

　　看到這里，大家可以試著動手，把公司或者自己的logo做成圖標(biāo)字體，試一試吧!

最新評論