uniapp 微信小程序 canvas海报无法使用自定义字体怎么办？

在uniapp开发微信小程序时，使用canvas绘制海报需要加载自定义字体，但尝试了以下方法都无效：

  1. 通过wx.loadFontFace加载网络字体
  2. 将字体文件放在static目录引用
  3. 设置font-family为加载后的字体名 控制台显示字体已加载成功，但canvas渲染时仍显示默认字体。请问如何正确让canvas识别自定义字体？需要特定API或特殊处理吗？
2 回复

在uniapp中，微信小程序canvas不支持直接加载自定义字体。解决方法：将字体文件转为base64，通过uni.loadFontFace加载，确保在绘制前字体已加载完成。


在 UniApp 中，微信小程序使用 Canvas 绘制海报时，无法直接通过 CSS 或 font-family 加载自定义字体，因为小程序环境不支持动态加载网络字体文件。以下是解决方案：

1. 使用小程序原生字体

如果自定义字体不是必须的，可使用小程序支持的默认字体（如 "Arial", "sans-serif"），或系统字体（如 "PingFang SC"）。

2. 将字体文件转换为 Base64 并内联

  • 步骤：
    1. 将字体文件（如 .ttf）转换为 Base64 格式（可用在线工具）。
    2. 在代码中定义字体，通过 wx.loadFontFace 加载（需在 Canvas 绘制前完成）。
  • 示例代码：
    // 在 Vue 方法或生命周期中加载字体
async loadCustomFont() {
  try {
    await wx.loadFontFace({
      family: 'MyFont', // 字体名称
      source: 'url("data:font/truetype;base64,<Base64字符串>")', // 替换为你的 Base64
      success: () => {
        console.log('字体加载成功');
        this.drawPoster(); // 开始绘制 Canvas
      },
      fail: (err) => {
        console.error('字体加载失败', err);
        this.drawPoster(); // 即使失败也继续绘制
      }
    });
  } catch (error) {
    console.error(error);
  }
},

drawPoster() {
  const ctx = uni.createCanvasContext('myCanvas');
  ctx.font = 'normal 20px MyFont'; // 使用自定义字体
  ctx.fillText('Hello World', 50, 50);
  ctx.draw();
}
    注意：Base64 字符串较长，可能影响性能，建议仅用于小字体文件。

3. 使用网络字体（需满足条件）

  • 如果字体文件已部署到 HTTPS 域名，可直接通过 URL 加载：
    wx.loadFontFace({
  family: 'MyFont',
  source: 'url("https://example.com/font.ttf")',
  success: () => { /* 绘制 */ }
});
  • 限制：域名需在小程序后台配置为合法域名，且字体文件支持跨域。

4. 备选方案：使用图片替代文本

如果字体加载不稳定，可将文本内容预先渲染为图片（在服务器端或通过其他工具），然后在 Canvas 中绘制图片。

注意事项：

  • 字体加载异步：确保在 wx.loadFontFace 的 success 回调后再绘制 Canvas。
  • 兼容性：wx.loadFontFace 需基础库 2.10.0 以上，旧版本需降级处理。
  • 性能：Base64 或网络字体可能增加加载时间，建议测试用户体验。

通过以上方法，可实现在 UniApp 微信小程序 Canvas 中使用自定义字体。如问题持续，检查字体文件格式或网络配置。

回到顶部