如何在uni中引入字體圖標並能在小程序中使用

二十八畫生

今天在使用uni引入iconfont圖標時，發現控制台報了個錯誤：

文件查找失敗:'./iconfont.eot?t=1588643701409'

這是由於沒有使用在線鏈接的緣故，以下是解決辦法：

假設讀者已經將要使用的icon下載到了本地

1. 在官網點擊圖標管理，然后到我的項目

2.找到剛剛下載到本地的項目圖標

3.點擊在線生成

復制

4. 復制生成的代碼，並覆蓋自己本地項目中的iconfont.css文件下的@font-face

這樣就可以在uni中使用了，並且可以在基於uni的小程序中使用，網上有看到說在微信小程序中使用icon更改為wxss后綴，但是在uni中是不需要的，但是需不需要仍然轉譯成base64還待觀察

另：如果基於以上方法運行在微信小程序端，首次可能會有報錯，VM30:1 Failed to load font，這時可以打開微信開發者工具 -> newwork :

雖然顯示307，但是同樣的在下方的同名文件的返回值是200，並且可以正常顯示，這個問題尚待解決。

另： 在uni中全局引入字體圖標文件需要在app.vue中的style中引入，並不是在main.js中引入。

以上。