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

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

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

　　工具：

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

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

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

具體的制作步驟如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最新評(píng)論