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

最新推荐文章于 2024-01-27 19:06:14 发布

Gu_fengqi

最新推荐文章于 2024-01-27 19:06:14 发布

阅读量3k

点赞数 1

文章标签：微信小程序小程序 ios

本文链接：https://blog.csdn.net/Gu_fengqi/article/details/125422606

版权

当在H5和开发者工具中字体引用正常，但真机调试时遇到问题，可以尝试在微信小程序中使用提供的解决方案。通过在static/js创建font.js文件，引入并执行wx.loadFontFace方法来加载字体，确保在iOS上字体能正常显示。此方法已在真机调试中得到验证。

摘要由CSDN通过智能技术生成

项目场景：

前提：之前的在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测试是可以的，希望可以帮助到大家。