微信小程序 加载自定义字体

一、loadFontFace接口

小程序官方提供的接口，最便捷的加载字体的方法，不过限制颇多。必须https且同源，canvas等原生组件不支持。注意！！使用本地文件无效，必须使用网络地址。

官方文档

演示代码：

wx.loadFontFace({

  family: 'FZSuXSLSJW',

  source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")',

  success: res => {

    console.log('font load success', res)

  },

  fail: err => {

    console.log('font load fail', err)

  }

})

复制代码

二、face-font url

传统的css规则，跟loadFontFace限制一样，必须https且同源，不支持canvas等原生组件，不支持本地文件。

演示代码：

@font-face {

    font-family: 'FZSuXSLSJW';

    src: url("https://we7.stuyun.com/FZSuXSLSJW.ttf")

}

复制代码

三、face-font base64

网上教程常介绍的方法，到transfonter上传文件，formats只勾选ttf就行。可以将字体转换成base64的face-font，复制到wxss里面就可以使用。但是缺点也很明显，小程序最大体积限制只能2m，随便一个中文字体就

@font-face {
  font-family: 'Patrick Hand SC';
  src: "BASE64";
  font-weight: normal;
  font-style: normal;
}