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

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

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

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

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

我想大概所有人首先想到的不是Iconfont的問(wèn)題，而是自己CSS的問(wèn)題，但后來(lái)證明不是這樣的，而真真切切是Iconfont的問(wèn)題。

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

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

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