【踩坑】iconfont使用異常bug

你見過html頁面上‘x’字符變成打印機圖標麼？通常人應該沒有。

-----------------------詭異bug-----------------------

今天測試報了一個bug，說頁面上‘x’變成了打印機，以前歷來沒遇到過~~

我看了看我這的，正常啊~又去虛擬機下windows看了下，也正常啊~

 

詭異，開始去百度。發現有人在百度知道提了問題~第一個答案，瞎扯。

不過下邊有個說，是由於用了微軟雅黑字體的緣由。

(#‵′)靠，微軟雅黑還有這個bug？下的我趕忙去試了試，然並卵，這人也是瞎說。

 

而後去google看看吧，搜了半天，也只有百度知道那一個案例~~囧，仍是本身去復現吧。

 

-----------------------穩定復現-----------------------

這裏先吐槽一下測試提的bug，沒有操做步驟~~~~~不過我經歷了十分鐘後，終於找到了穩定復現~~~~那麼，問題是怎麼來的呢

 

1. 嘗試修改元素class發現，用了某個class後纔有這個問題，該元素下全部的‘x’均會變成打印機。那就是這個class有問題。

2. mac OS和windows下表現一致。

3. 去查看iconfont庫，發現並無打印機圖標。

4. 懷疑和content有關，把正常的圖標的content屬性改爲x，果真，也變成了打印機。

5. 結合3.4，懷疑chrome默認加載了什麼iconfont字體庫設置，把‘x’當作了iconfont的content

6. 未果。

7. 考慮iconfont自身問題，抓包看font資源，preview後，抓到真兇

8. 去別的網站（iconmoon）覈對，確認

 

9. 解決問題。iconfont渲染錯誤，咱這一時半會兒除了替換字體包，也沒轍。因此先從用法上規避。

 

問題用法

<span class="iconfont">xxxxxx</span>

改後用法

<span>xxxxxx<i  class="iconfont"></i></span>

 

也就是說，iconfont元素裏邊避免在使用文案，全部圖標使用最小元素去處理

 

 

廢話了一大堆，想一想仍是由於項目中iconfont的使用沒有作好規範~~~~~~~~~

心累~~~幾個模塊，兩三種用法~~~等改天代碼重構優化吧

流水帳文章，本身留着看吧

 

結論：

使用iconfont元素的內部，避免使用文案。規範iconfont用法~

 

另外，已經在github上加了issue，等修復就好