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

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

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

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

方法一:本地引入

1、打开https://transfonter.org/
小程序中引入外部字体的三种方式以及出现的问题_第1张图片

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); },
    })
  },

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

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

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

小程序中引入外部字体的三种方式以及出现的问题_第2张图片

你可能感兴趣的:(小程序,前端,javascript)