效果展示
小程序因?yàn)榘笮〉脑颍枰炎煮w文件放到網(wǎng)絡(luò)資源上,要想在真機(jī)上也能夠正常顯示字體,這時(shí)候請(qǐng)求的字體的網(wǎng)絡(luò)資源文件頭需要滿足如下條件:
- 下載的字體文件的響應(yīng)頭中必須包含:
Access-Control-Allow-Origin: *
- 下載的字體文件的響應(yīng)頭:
Content-Type:font/ttf | font/woff | font/woff2 | ...
- 為了不被緩存影響,建議加上
Cache-Control: no-cache
如何設(shè)置上面的參數(shù)呢?
- 網(wǎng)絡(luò)字體是放在阿里云oss對(duì)象存儲(chǔ)的籃子里的,進(jìn)入阿里云oss設(shè)置:
- 設(shè)置跨域規(guī)則:
- 進(jìn)入文件列表,字體文件處:
- 設(shè)置http頭:
彩蛋:
引入字體的兩種方式都是可以的
- 直接在css文件中寫@font-face
- 使用官方寫的wx.loadFontFace()引入也可以,代碼片段地址https://developers.weixin.qq.com/s/rDIgLImY7hD7
參考連接: https://developers.weixin.qq.com/community/develop/article/doc/000a8a08178258539cbb3f26a51413
https://developers.weixin.qq.com/community/develop/doc/0004841e3e8108082d1799e9c51000?highLine=wx.loadFontFace
https://www.ccc5.cc/2375.html文章來源:http://www.zghlxwxcb.cn/news/detail-644757.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-644757.html
到了這里,關(guān)于怎么解決小程序里引入網(wǎng)絡(luò)字體包后小程序模擬器上能夠正常加載顯示而真機(jī)上卻加載不了顯示不出來的問題的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!