仔细查阅了uniapp的文档，里面提到了一个api
这里的source必须是网络地址，指向字体的下载链接。 因为我没有服务器，所以我使用了免费网站托管服务器。
下面是部分必要代码片段
export default {
components: {},
data() {
return {
canvasW:0, // 画布宽
canvasH:0, // 画布高
SystemInfo:{}, // 设备信息
text:'有志者事竟成',
type:2,
ctx:null,
textPos:[],
fontSize:36,
singleText:'',
imgUrl:require('./bg.jpg'),
wid:80,
hei:80,
result_img:'',
canvasWBig:0, // 画布宽
canvasHBig:0, // 画布高,
visible:false,
canvas:null,
showCtx:null,
startDIY:false,
fontFamily:['sans-serif','kaiti','yunfeng','jianhao'],
fontUrl:['','https://spkf-zsxn-prod.s3.cn-north-1.amazonaws.com.cn/pic/livecenter/kaiti.ttf','https://my-font-library.pages.dev/yunfeng.ttf','https://my-font-library.pages.dev/jianhao.ttf'],
family:'sans-serif', //默认
useColorStr:'black',
colorBarShow:false,
redShow:false,
greenShow:false,
blackShow:true,
yellowShow:false,
blueShow:false
}
},
setFont(family){
this.family = family
let self = this;
if(family!='sans-serif'){
let fontUrl = ''
if(family==='kaiti'){
fontUrl = self.fontUrl[1]
}else if(family==='yunfeng'){
fontUrl = self.fontUrl[2]
}
else if(family==='jianhao'){
fontUrl = self.fontUrl[3]
}
uni.loadFontFace({
global: true, // 是否全局生效
family: family, // 定义的字体名称
source: 'url("'+fontUrl+'")', // 字体资源的地址。建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。
success() {
console.log('成功的回调函数')
self.family = family
self.ctx.font = self.fontSize+"px "+self.family
console.log(self.ctx.font)
self.showMsg(self.ctx.font)
self.ctx.fillStyle = self.useColorStr;
self.drawNewFont()
},
fail(){
console.log('失败的回调函数')
},
complete(){
//console.log('接口调用结束的回调函数（调用成功、失败都会执行）')
},
scopes: ["webview", "native"],
})
}else{
self.family = family
self.ctx.font = self.fontSize+"px "+self.family
console.log(self.ctx.font)
self.showMsg(self.ctx.font)
self.ctx.fillStyle = self.useColorStr;
self.drawNewFont()
}
},
APP和H5字体是正常的，不管是用uni.loadFontFace还是用@font-face都可以直接用，就小程序事情多
下面效果图
