【微信小程序】微信小程序使用canvas合成海报时遇上字体无法正常加载的问题

本文链接：https://blog.csdn.net/AidLoan/article/details/144058055

使用微信的加载字体apiwx.loadFontFace进行字体加载时，首先按照官方示例进行字体加载

wx.loadFontFace({
  family: 'Bitstream Vera Serif Bold',
  source: 'url("https://res.wx.qq.com/t/wx_fed/base/weixin_portal/res/static/font/33uDySX.ttf")',
  success: console.log
})

发现字体在小程序模拟器中显示正常但是在手机上加载失败
于是仔细阅读文档，发现需要在字体文件所在服务器上开启对小程序域名(servicewechat.com)的跨域支持
在这里插入图片描述

第二次尝试发现在手机上正常显示但是使用canvas2d合成海报时无法使用字体，第二次仔细阅读文档，发现还需要进行scopes的设置来确定字体的生效范围，
在这里插入图片描述
于是再次进行修改

wx.loadFontFace({
    family: 'SourceHanSansCN-Regular',
    global: true,
    scopes: ['webview', 'native'],
    source: 'url("https://res.wx.qq.com/t/wx_fed/base/weixin_portal/res/static/font/33uDySX.ttf")', //此处需替换为真实字体地址
    success(res) {
        console.log('loadFontFace=>>>>' + JSON.stringify(res))
    },
    fail: function(res) {
        console.log('loadFontFace=>>>>' + JSON.stringify(res))
    },
    complete: function(res) {
        console.log('loadFontFace=>>>>' + JSON.stringify(res))
    }
})