小程序引入第三方字體

1、新建一個字體文件font.js

2、將需要引入的字體上傳到oss上。

 

 

3、在font.js中使用微信提供的api=> wx.loadFontFace({}) 下載字體

// 加載字體
var loadFont = function(){
  
  wx.loadFontFace({
    family: 'YouSheBiaoTiHei', //設置一個font-family使用的名字 中文或英文
    global: true,//是否全局生效
    source: 'url("xxxxxxx.ttf")', //字體資源的地址
    success: function(e){
      console.log('字體調用成功')
    },
    fail: function (e) {
      console.log('字體調用失敗')
    },
  })

}
module.exports = {
  loadFont: loadFont
};

 

 

4、在app.js中或在要使用頁面字體的頁面中下載字體（在兩處引用各有優缺點待處理）

const font = require('/utils/font.js')
//app.js中引入 
onLaunch: function () {
  font.loadFont(); //下載字體
}

//具體頁面引入
onLoad: function (options) {
  font.loadFont(); //下載字體
}

 

5、在wxss中正常使用

font-family: 'YouSheBiaoTiHei';