最近在用Taro写一个多端的商城，遇到一个问题是关于icon这块，我们使用了iconfont, 但是把字体文件下载下来，必然打包就会更大，这在微信小程序这类的限制应用程序大小的平台来讲是不太好的，于是开始尝试使用iconfont的在线地址
首先，进入iconfont 项目管理页面，获取在线地址， 注意应当选用Unicode, 因为另外两种都是需要加载链接的， 这就带来一个问题，打包成微信小程序的时候，你就没办法将链接加载进去了, 所以我们选用第一种
image.png
然后我们可以将对应的css导入到应用s中.
image.png
我们运行下应用，会发现iconfont的图标根本无法正常显示。
image.png
问题发生了，我们需要找下原因， 当时我第一反应应该是font字体没加载
image.png
果然，就是因为对应的字体未加载才导致图标显示异常， 但是我们明明在css中引用了远程的字体，这时候当我去查看加载的对应的css时发现，链接地址好像有点不同
image.png
查询相关文档发现，这是因为css-loader 开启了source map, 于是怀疑是由于sourcemap的原因导致@font-face无法加载。
那我们能不能直接将iconfont.css在css-loader的编译规则中排除掉，直接用style-loader 内联style 插入？
image.png
再次回到页面，我们就能看到正常显示了。
经测试，这个方式仅针对h5的dev模式下iconfont显示问题， 微信小程序未发现问题，h5打包后也是正常显示的
网友评论