小程序
小游戏
企业微信
微信支付
扫描小程序码分享
canvas 使用 wx.loadFontFace 引用的中文字体，在开发工具中生成图片字体能正常，在真机下生成的图片，艺术字体变成了默认字体（黑体），是什么原因导致艺术字体失效？
12 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
//这里是导入字体的代码
wx.loadFontFace({
global:true,
family: '\u0066\u007a\u0063\u0068\u0075\u0068\u0065\u0069', //方正粗黑 unicode编码转换
source: 'url("https://636c-cloud1-6gcfsk5o568da2a2-1309523468.tcb.qcloud.la/font/FZCCHJW.ttf")',
scopes: ['webview', 'native'],
success:(res=>{
console.log(res)
})
//下面是在canvas里进行文字的绘制
ctx.font = item.textSize + 'px' + ' ' + ziti //这里是设置字体大小和字体
ctx.fillStyle = item.textColor
ctx.strokeText(item.textValue,item.left,item.top+30)
ctx.fillText(item.textValue,item.left,item.top+30)
ctx.closePath()
ctx.setTransform(1,0,0,1,0,0); //解决错位的问题，重新初始化坐标
ctx.draw(true)
//就是设置了字体，在vanvas绘制的图片然后生成，字体没有效果。
这里是2023-02-23 canvas2d 我这里真机和mac ide 均不好使. 单webview dom 正常 canvas 不好使 加上native api 就会失败
wx.loadFontFace({ global: true, family: cssFamily, source: `url(${that.url})`, scopes: ["webview","native"], // 单webview 正常 加上native api就会失败 success(res) { console.log('FontFace load success', res, that.map, text) resolve({ code: 800 }); }, fail: (res) => { console.error('FontFace load error', res, family, text) resolve({ code: 400 }); }, })
这个小程序怎么实现的，我看它的 canvas 也可以。我 canvas 不行。求解法。
安卓实测：Canvas使用自定义字体，不能使用多个字体族；否则自定义字体会失效；
ctx.font = "bold 48px myFont";//这是有效的 crx.font = "bold 48px myFont Roboto";//myFont 字体将会失效
到现在还没有解决呢？ 模拟器可以 真机无效
24年了，还没有解决。我发了帖子也就没人回了，真无语
https://developers.weixin.qq.com/community/develop/doc/0002a68b38c90084a451854e36b000
都TM2023年了，你们微信要是没有人可以招一个，就这破问题都跨越几个世纪了还解决不了
2022.12.26 小程序canvas依然无法渲染外部外部加载字体，无语
........小程序方言诚不欺我
应该是基础库的问题。 你试试2.25.4 应该就没问题！我现在在排查这个问题
正在加载...
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
请具体描述问题出现的流程，并提供能复现问题的简单代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。
//这里是导入字体的代码wx.loadFontFace({global:true,family: '\u0066\u007a\u0063\u0068\u0075\u0068\u0065\u0069', //方正粗黑 unicode编码转换source: 'url("https://636c-cloud1-6gcfsk5o568da2a2-1309523468.tcb.qcloud.la/font/FZCCHJW.ttf")',scopes: ['webview', 'native'],success:(res=>{console.log(res)})})//下面是在canvas里进行文字的绘制ctx.font = item.textSize + 'px' + ' ' + ziti //这里是设置字体大小和字体ctx.fillStyle = item.textColorctx.strokeText(item.textValue,item.left,item.top+30)ctx.fillText(item.textValue,item.left,item.top+30)ctx.closePath()ctx.setTransform(1,0,0,1,0,0); //解决错位的问题，重新初始化坐标ctx.draw(true)//就是设置了字体，在vanvas绘制的图片然后生成，字体没有效果。这里是2023-02-23 canvas2d 我这里真机和mac ide 均不好使. 单webview dom 正常 canvas 不好使 加上native api 就会失败
wx.loadFontFace({ global: true, family: cssFamily, source: `url(${that.url})`, scopes: ["webview","native"], // 单webview 正常 加上native api就会失败 success(res) { console.log('FontFace load success', res, that.map, text) resolve({ code: 800 }); }, fail: (res) => { console.error('FontFace load error', res, family, text) resolve({ code: 400 }); }, })这个小程序怎么实现的，我看它的 canvas 也可以。我 canvas 不行。求解法。
安卓实测：Canvas使用自定义字体，不能使用多个字体族；否则自定义字体会失效；
ctx.font = "bold 48px myFont";//这是有效的 crx.font = "bold 48px myFont Roboto";//myFont 字体将会失效到现在还没有解决呢？ 模拟器可以 真机无效
24年了，还没有解决。我发了帖子也就没人回了，真无语
https://developers.weixin.qq.com/community/develop/doc/0002a68b38c90084a451854e36b000
都TM2023年了，你们微信要是没有人可以招一个，就这破问题都跨越几个世纪了还解决不了
2022.12.26 小程序canvas依然无法渲染外部外部加载字体，无语
........小程序方言诚不欺我
应该是基础库的问题。 你试试2.25.4 应该就没问题！我现在在排查这个问题