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

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

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

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

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

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

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

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

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