【微信小程序】真机调试引用的外部字体不生效问题

项目场景:

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


问题描述

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

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

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


解决方案:

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

1、 在static/js中加一个font.js;
【微信小程序】真机调试引用的外部字体不生效问题_第1张图片

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
};

3、真机调试再试一下。


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

你可能感兴趣的:(微信小程序,小程序,ios)