仔細(xì)查閱了uniapp的文檔滤否，里面提到了一個(gè)api
這里的source必須是網(wǎng)絡(luò)地址，指向字體的下載鏈接。 因?yàn)槲覜]有服務(wù)器硝逢，所以我使用了免費(fèi)網(wǎng)站托管服務(wù)器。
下面是部分必要代碼片段
export default {
components: {},
data() {
return {
canvasW:0, // 畫布寬
canvasH:0, // 畫布高
SystemInfo:{}, // 設(shè)備信息
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',? //默認(rèn)
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('成功的回調(diào)函數(shù)')
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('失敗的回調(diào)函數(shù)')
},
complete(){
? //console.log('接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功柴罐、失敗都會執(zhí)行）')
},
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都可以直接用，就小程序事情多
下面效果圖
