微信小程序--引用外部字体（云开发实现）

问题描述

        小程序自带的字体有限，那么可以引用外部的字体吗？
        答案：可以！通过百度，方法大概可以分为两种：一是将字体转换，再放在小程序本地；二是将字体放在服务器上，需要使用的时候，发起请求下载字体即可。第一种方法，很多文章都有提到，感兴趣的小伙伴可以看看，这种方法优点就是延迟非常小，加载速度快。但是缺点就是字体文件太大了，几M或者更大。第二种方法优点就是不占用本地空间，缺点就是延迟较大。这里海轰采用的是第二种方法。

具体步骤

1.下载字体文件【建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容】

• 具体下载地址小伙伴自行百度吧，非常多免费的字体可以下载。

2.将下载的文件上传云数据库，获取其下载地址

3.利用wx.loadFontFace（）发起请求

loadFontFace() {    
    const self = this
    wx.loadFontFace({
      family: this.data.fontFamily,// 自定义字体的名字 随便起就可以
      source: 'url("https://1256883646.tcb.qcloud.la/ziti/PoetsenOne-Regular-1.ttf?sign=d9d5278113f6bf6&t=1589421230")',//这里填写第二步获取的下载地址
      success(res) {
        console.log(res.status)
        self.setData({ loaded: true })
      },
      fail: function(res) {
        console.log(res.status)
      },
      complete: function(res) {
       console.log(res.status)
      }
    });
  }

4.引用字体

• 只需要在wxss文件中将font-family设置为自定义名字就可以啦

.font-loaded {
  font-family: "Bitstream Vera Serif Bold";//自定义字体名字
}

测试截图

原始字体

引用字体后

雨听

青苔入镜 檐下风铃 摇晃曾经 回忆 无从剪接
微信搜索【海轰Pro】
回复：雨听
获得海轰提供的小礼物一份
本文使用的代码片段海轰已经上传小程序：海轰Pro
需要的小伙伴请自行提取吧
希望每个小伙伴每天都开开心心 \ (^ o ^)/~