小程序中引入外部字体的三种方式以及出现的问题

需求：输入一段标题后，可选择不同的字体显示在页面上。

免费的商用字体下载链接：

链接: https://pan.baidu.com/s/1XLabx_xzC5kJycv7ejJU8Q 提取码: ka4r

方法一：本地引入

1、打开https://transfonter.org/

2、引入ttf或其他格式的文件，勾选banse64格式输出
3、将输出的文件下载到本地，引入到wxss里面

优点：加载速度快，变换字体的过程几乎看不见，用户体验好
缺点：转为base64后文件一般过大，如果太多字体文件会影响性能，小程序打包时最大不能超过2M，就需要分包处理；也可以指定文字进行输出，这样文件会小很多。

方法二：css外链形式引入

1、将ttf文件放到服务器中；
2、新建一个wxss文件，写入以下代码：

@font-face {
  font-family: "HarmonyOSHeiTi";  /* 这里的字体名称是自定义的 */
  src: url("https://h5.amemori.cn/h5/font-css/1.ttf"); /* 服务器上ttf文件的路径，记得配置域名权限 */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ALiPuHui";
  src: url("https://h5.amemori.cn/h5/font-css/2.otf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3、在需要用到的css页面引入该文件并使用字体：

@import '../font/font-family.wxss';

text{
  font-family: "HarmonyOSHeiTi";
}
1
2
3
4
5

优点：不占用小程序内存
缺点：更换字体时有延迟，用户会明显的看到更换字体的过程。

方法三：js外链形式引入

1、在需要用到的页面的js文件，onLoad中写入：

wx.loadFontFace是微信官方动态加载网络字体方法：https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html

  onLoad(options) {
    wx.loadFontFace({
      family: 'HarmonyOSHeiTi',
      source: 'url("https://h5.amemori.cn/h5/font-css/1.ttf")',
      complete: function (res) { console.log('插入字体'); console.log(res); },
      success: function (res) { console.log('成功'); console.log(res); },
      fail: function (res) { console.log('失败'); console.log(res); },
    })
  },
1
2
3
4
5
6
7
8
9

2、在wxss中直接使用family中定义的字体就可以啦。
优缺点同方法二

四、出现的问题以及解决方法：

开发工具和ios都显示正常，但是安卓机字体设置无效
解决办法：服务器配置cors，即可解决。