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

这篇具有很好参考价值的文章主要介绍了小程序中引入外部字体的三种方式以及出现的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

链接: 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;
}

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

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

text{
  font-family: "HarmonyOSHeiTi";
}

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

方法三：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); },
    })
  },