小程序canvas导入字体

在需要使用自定义字体的页面中，在canvas绘制之前加入以下代码：

wx.loadFontFace({
  family: '自定义字体名称',
  source: 'url("字体文件的路径")',
  scopes: ['webview', 'native'],//由于canvas是原生组件，所以需要加上native，否则无效

  success: function () {
    // 在这里进行canvas绘制
  }
})

 

在canvas中使用自定义字体

ctx.setFontSize(30) // 设置字体大小
ctx.font = '自定义字体名称' // 设置字体名称，与loadFontFace中的family保持一致
ctx.fillText('导入自定义字体', 50, 50)

 

注意：导入自定义字体需要网络请求，如果字体文件比较大或者网络不好，可能会导致字体加载失败或者造成卡顿。建议使用小字体文件，并且优化网络请求。