【微信小程序】使用自定义字体的三种方法

一、loadFontFace接口

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

官方文档：wx.loadFontFace(Object object) | 微信开放文档

演示代码：

wx.loadFontFace({
  family: 'DFPWaWa-B5',
  source: 'url("https://we7.stuyun.com/DFPWaWa-B5.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: 'DFPWaWa-B5';
    src: url("https://we7.stuyun.com/DFPWaWa-B5.ttf")
}

三、face-font base64

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

一、找设计要.ttf文件的字体

二、通过在线文字转换工具对文件进行转换，将字体转化为base64的face-font

操作步骤：

1.点开在线文字转换工具

2.点击按钮Add fonts（添加字体，这里所要传的文件就是找设计要得.tff文件）

3.将Base64 encode按钮打开（Base64 编码），下面的Formats按钮（格式按钮）只需勾选TTF格式

4.点击Convert按钮（转换按钮），转换好后点击左边的Download（下载），将下载好的文件打开，里面会有一个stylesheet.css文件

 

三、复制下载好的stylesheet.css文件内容，粘贴到需要使用的wxss文件内

  @font-face {
      font-family: 'DFPWaWa-B5';
      src: url('./fonts/DFPWaWa-B5.ttf') format('truetye');   //这里的路径为上面转换吼的base64的路径
    }

    .box {
      font-family: 'DFPWaWa-B5';      //运用在你所需要的标签样式上，名字和上面引入的font-family名称要一一对应，记得要加''
    }

四、总结：最好还是使用小程序官方提供的loadFontFace接口，最便捷的加载字体的方法不过限制颇多。我这边的需求只能通过第三种方法实现，具体还是看各位的需求去使用哪种方法