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

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

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

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

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

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

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

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

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