【微信小程序】真机调试引用的外部字体不生效问题_小程序如何查看字体是否生效

项目场景：

前提：之前的在H5和开发者工具里面都正常：

---

问题描述

问题：在H5和开发者工具里面字体引用都正常，但是真机调试出现问题。

在H5和开发者工具里面字体引用不正常的参考我的上一篇文章：

解决引入外部字体在H5中生效，微信开发者工具中不生效的问题：https://blog.csdn.net/Gu_fengqi/article/details/125256089

---

解决方案：

微信小程序：可以试试下面的这种方法，在IOS上测试字体是可以生效的。

1、 在static/js中加一个font.js；

2、在js里加入下面的代码：

var loadFont = function(){
  wx.loadFontFace({
    family: 'Branding-Bold', //设置一个font-family使用的名字 中文或英文
    global: true,//是否全局生效
    source: 'url("https://xxxx-xxxx.cos.ap-chengdu.myqcloud.com/Branding-Bold.woff2.ttf")', //字体资源的地址
    success: function(e){
      console.log('字体调用成功')
    },
    fail: function (e) {
      console.log('字体调用失败')
    },
  })
}
module.exports = {
  loadFont: loadFont
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、真机调试再试一下。

---

目前ios测试是可以的，希望可以帮助到大家。