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.配置资源下载链接
在这里插入图片描述

更多推荐