在微信小程序中引入字体样式
在微信小程序中引入字体样式
- 字体文件过大，建议将文件放在服务器上
一、使用wx.loadFontFace
- 在
app.js中使用wx.loadFontFace引入字体
wx.loadFontFace({
family: 'fzcs',
global: true,
source: 'url("http://xxx/static/fonts/fzcs.woff")',
success(res) {
},
fail: function (res) {
},
complete: function (res) {
}
});
- 在需要的页面中设置
font-family
.font-box{
padding: 20px;
font-family: 'fzcs';
}
二、使用@font-face
在app.wxss中使用@font-face引入字体文件
@font-face {
font-family: "fzzy";
src: url("http://xxx/static/fonts/fzzy.woff2");
}
在需要的页面使用字体
.font-box1{
padding: 20px;
font-family: 'fzzy';
}
样式如下：
