微信小程序如何自定义字体wx.loadFontFace
·
1.加载网络字体资源
Page({
/**
* 页面的初始数据
*/
data: {
loaded :false
},
// 字体
loadFontFace() {
wx.loadFontFace({
global:true, // 版本 2.10.0 后 全局app.js 使用
family: 'font',
source: 'url("https://xxx.com/font/font.TTF")',// 不是真的链接
success: (res) => {
console.log(res.status)
this.setData({ loaded: true })
},
fail: function (res) {
this.setData({ loaded: false })
},
complete: function (res) {
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.loadFontFace()
},
})
2.局部使用字体
.font-loaded {
font-family: "font";
}
<view class="{{ loaded ? 'font-loaded' : '' }}" >自定义字体</view>
3.微信小程序设置全局css,需要在app.wxss文件中设置page的样式
page {
font-family:"font";
font-size:32rpx; /*微信小程序中,使用rpx做单位*/
}
4.配置资源下载链接

更多推荐



所有评论(0)