admin管理员组文章数量:1594755
在小程序开发中 经常需要我们自定义字体样式,我们可以通过一些字体网站下载字体文件最好是T T F格式的文件,然后我们把这些文件上传到微信的数据库(需要先开通云开发) 然后调用这些文件来达到自定义字体family的目的。
第一步:下载字体文件。
这里大家可以自行百度字体文件下载的一些网站。
第二步:上传字体文件。
1. 打开云开发。
2.点击存储。
3.上传文件。
完成!
第三步:获取文件临时链接并传给字体加载函数。
这里的思路是,我们要加载是字体库, 根据字体加载函数,首先我们要获得字体的下载链接, 因此我们要调用获取数据库中文件临时链接的函数。
具体代码如下:
wx.cloud.getTempFileURL({
fileList:["cloud://cloud1-1g1re6j0a64321a3.636c-cloud1-1g1re6j0a64321a3-1309337326/FZSXSLKJW.TTF"],
success:res=>{
console.log(res.fileList[0].tempFileURL)
let url = res.fileList[0].tempFileURL
wx.loadFontFace({
global:true,
family: 'kaiti',// 自定义字体名
source: 'url("' + url + '")',
desc: {
style: 'normal',
weight: 'normal',
variant: 'normal'
},
success: (result) => {
console.log("成功!")
},
fail: () => {
console.log("失败!")
},
complete: () => {}
});
},
fail:console.error
})
}
需要注意的是第二行中fileList文件ID来自这里:
第五步:调用。
局部调用:
直接在样式文件font-family: "kaiti";
全局调用:
在app.wxss中:
page{
font-family: "kaiti"; // 引号内为自定义的family是字体名
}
附: wx.loadFontFace(Object object) | 微信开放文档CloudCloud: Promise<Object> | 微信开放文档
版权声明:本文标题:【微信小程序】上传字体文件自定义字体family 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728201435a1149430.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论