解决uniapp微信小程序canvas不能引入外部字体的问题

仔细查阅了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都可以直接用，就小程序事情多

下面效果图