在微信小程序中引入字体样式
- 字体文件过大,建议将文件放在服务器上
一、使用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';}
样式如下: