在微信小程序中引入字体样式

在微信小程序中引入字体样式

• 字体文件过大，建议将文件放在服务器上

一、使用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';
 }

样式如下：