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

项目场景:

前提:之前的在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
};

3、真机调试再试一下。


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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值