Canvas使用uni.loadFontFace加载字体 在真机上不生效

该问题请在专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

uni.loadFontFace 在开发工具里能正常把字体装进 Canvas，但在微信真机上不生效，核心原因是：
Canvas 2D 在微信小程序环境属于 native 上下文，而 uni.loadFontFace 默认只把字体注册到 webview 上下文。
因此，你在 Canvas 里写 ctx.font = '14px myFont' 时，native 层找不到这个字体，就回退成系统默认字体，看起来就像“没生效”。

解决思路：让字体同时注册到 native 上下文，或者干脆绕过 loadFontFace 直接把字体文件喂给 Canvas。

一、官方做法（仅小红书小程序支持）
uni.loadFontFace 从 2.25.0 起在小红书小程序支持 scopes: ['native']，微信目前尚未支持，所以这条路微信走不通。

二、微信官方做法（推荐）
微信小程序 Canvas 2D 提供了自己的加载接口，直接在 canvas 节点上配置即可：

// page.json 里给该页面启用 Canvas 2D  
"usingComponents": {  
  "canvas-2d": "plugin://wxcanvas2d/canvas"  
}  

// wxml  
<canvas type="2d" id="poster" style="width:750rpx;height:1200rpx;"></canvas>  

// js  
onReady() {  
  wx.createSelectorQuery()  
    .select('#poster')  
    .fields({ node: true, size: true })  
    .exec(res => {  
      const canvas = res[0].node  
      const ctx = canvas.getContext('2d')  

      // 关键：把字体文件下载到本地，再注册到 Canvas  
      wx.downloadFile({  
        url: 'https://static.xxx.com/font/myfont.ttf',  
        success(d) {  
          if (d.statusCode === 200) {  
            // 微信 Canvas 2D 专用接口  
            canvas.loadFont(d.tempFilePath, 'MyFont')  
            ctx.font = 'bold 40px MyFont'  
            ctx.fillText('Hello 微信小程序', 100, 100)  
          }  
        }  
      })  
    })  
}

三、退而求其次的做法
如果项目暂时不能切到微信 Canvas 2D，只能继续用 webview 里的 Canvas，那就：

1. 把海报绘制放到一个隐藏的 <canvas>（非原生，而是页面里的 web-canvas）；
2. 用 html2canvas 或 dom-to-image 把这块区域转成图片；
3. 再把图片贴到原生 <canvas> 里做后续合成。
   缺点是多一次绘制，性能会差一点。

四、注意事项

• 字体文件必须放可下载的 https 地址，且域名已在小程序后台配置 downloadFile 合法域名。
• 字体体积尽量控制在 2 MB 以内，否则低端机会下载失败。
• 真机调试时记得清缓存，微信会把字体文件缓存到本地，旧缓存会导致“看起来没生效”。

一句话总结：
uni.loadFontFace 默认进不了微信原生 Canvas，想直接在 Canvas 里用自定义字体，请改用微信小程序 Canvas 2D 的 canvas.loadFont 接口。