現(xiàn)在是移動互聯(lián)網(wǎng)時(shí)代，而隨著這個(gè)時(shí)代的到來網(wǎng)頁設(shè)計(jì)也偏向于扁平化，對于很多網(wǎng)頁使用的圖標(biāo)都不再像以前那樣使用一些寫實(shí)的圖標(biāo)了，而都是使用一些扁平化的圖標(biāo)了。當(dāng)前，不管是在PC端還是在移動端，很多icon圖標(biāo)都進(jìn)行字體化。

icon圖標(biāo)字體化帶來的一個(gè)非常明顯的好處就是使得網(wǎng)頁體積減小，同時(shí)在移動端將有更好的清晰度，其次從某種程度上對我們的圖標(biāo)維護(hù)更加簡單（當(dāng)然有的時(shí)候卻可能更加復(fù)雜，但我依然認(rèn)為大多數(shù)情況下是更加簡單的）。icon字體化其實(shí)本質(zhì)上還是圖片，只是是矢量的而已，UI設(shè)計(jì)師可以自行設(shè)計(jì)，當(dāng)然也可以直接引用第三方已經(jīng)設(shè)計(jì)好的庫，這樣的庫有非常之多。

而當(dāng)你接觸阿里巴巴Iconfont后，你會發(fā)現(xiàn)這個(gè)平臺非常強(qiáng)大，因?yàn)樗梢宰远x增加刪除及修改你自己的庫，你可以自己制作自己的庫，也可以從N個(gè)庫中選擇一個(gè)或多個(gè)圖標(biāo)然后疊加起來創(chuàng)建一個(gè)新的項(xiàng)目，然后可以動態(tài)維護(hù)這個(gè)庫。其官方是這樣說的：

Iconfont.cn是由阿里巴巴UX部門推出的矢量圖標(biāo)管理網(wǎng)站，也是國內(nèi)首家推廣Webfont形式圖標(biāo)的平臺。網(wǎng)站涵蓋了1000多個(gè)常用圖標(biāo)并還在持續(xù)更新中，Iconfont平臺為用戶提供在線圖標(biāo)搜索、圖標(biāo)分撿下載、在線儲存、矢量格式轉(zhuǎn)換、個(gè)人圖標(biāo)庫管理及項(xiàng)目圖標(biāo)管理等基礎(chǔ)功能。同時(shí)iconfont.cn平臺作為矢量圖標(biāo)倡導(dǎo)者，積極在線分享矢量圖標(biāo)制作經(jīng)驗(yàn)、前端應(yīng)用說明，及應(yīng)用中常見的一些問題。

但最近在使用這個(gè)平臺的時(shí)候發(fā)現(xiàn)了一個(gè)問題，一個(gè)項(xiàng)目拉進(jìn)大概40個(gè)圖標(biāo)的時(shí)候使用是非常正常的，而加入一些圖標(biāo)的時(shí)候發(fā)現(xiàn)詭異的一幕出現(xiàn)了——所有圖標(biāo)占的高度非常高，而且圖標(biāo)頂在頂部，這顯然不是我們所希望看到的。

我想大概所有人首先想到的不是Iconfont的問題，而是自己CSS的問題，但后來證明不是這樣的，而真真切切是Iconfont的問題。

如上圖，左邊就是標(biāo)題中提到的詭異的問題，而右邊就是一個(gè)正常的情況；而且左邊這個(gè)詭異的問題只會在ios和安卓等移動設(shè)備上出現(xiàn)。如果你還沒看到詭異的問題，那么你的眼力就不夠好了，看左邊圖標(biāo)下面的空隙就知道了。而上述兩個(gè)對比都是直接從平臺下載，還沒加入任何其他代碼的demo。

最后刪除最近添加的幾個(gè)圖標(biāo)即解決以上問題；初步認(rèn)定應(yīng)該是新增加的圖標(biāo)中的某一個(gè)或者某幾個(gè)圖標(biāo)存在問題導(dǎo)致整體出問題，而且不管你是使用其他的css來控制總不是不盡完美。因此，可以斷定這個(gè)平臺中某一些圖標(biāo)是有問題的。

個(gè)人覺得，在沒有更好的解決方案之前，最好避免這種問題出現(xiàn)的方法就是每次添加圖標(biāo)更新后及時(shí)查看使用到圖標(biāo)地方的狀態(tài)，免得多次添加后，其中的某個(gè)圖標(biāo)出問題卻不知道是哪一個(gè)，那樣的篩選成本會很高。