最近在用Taro寫一個多端的商城，遇到一個問題是關(guān)于icon這塊损敷，我們使用了iconfont, 但是把字體文件下載下來葫笼，必然打包就會更大，這在微信小程序這類的限制應(yīng)用程序大小的平臺來講是不太好的拗馒，于是開始嘗試使用iconfont的在線地址
首先路星，進入iconfont 項目管理頁面，獲取在線地址诱桂， 注意應(yīng)當(dāng)選用Unicode, 因為另外兩種都是需要加載鏈接的洋丐， 這就帶來一個問題，打包成微信小程序的時候挥等，你就沒辦法將鏈接加載進去了, 所以我們選用第一種
然后我們可以將對應(yīng)的css導(dǎo)入到應(yīng)用s中.
我們運行下應(yīng)用友绝，會發(fā)現(xiàn)iconfont的圖標(biāo)根本無法正常顯示。
問題發(fā)生了肝劲，我們需要找下原因迁客， 當(dāng)時我第一反應(yīng)應(yīng)該是font字體沒加載
果然，就是因為對應(yīng)的字體未加載才導(dǎo)致圖標(biāo)顯示異常辞槐， 但是我們明明在css中引用了遠程的字體掷漱，這時候當(dāng)我去查看加載的對應(yīng)的css時發(fā)現(xiàn)，鏈接地址好像有點不同
查詢相關(guān)文檔發(fā)現(xiàn)榄檬，這是因為css-loader 開啟了source map, 于是懷疑是由于sourcemap的原因?qū)е?code>@font-face無法加載卜范。
那我們能不能直接將iconfont.css在css-loader的編譯規(guī)則中排除掉，直接用style-loader 內(nèi)聯(lián)style 插入鹿榜？
再次回到頁面海雪，我們就能看到正常顯示了。
經(jīng)測試舱殿，這個方式僅針對h5的dev模式下iconfont顯示問題奥裸， 微信小程序未發(fā)現(xiàn)問題，h5打包后也是正常顯示的
