Three ways to introduce external fonts in Mini Programs and problems

需求：After entering a title,Different fonts can be selected to display on the page.

Free commercial font download link：

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

方法一：本地引入

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

2、引入ttf或其他格式的文件,勾选banse64格式输出
3、Download the output file locally,引入到wxss里面

优点：加载速度快,The process of changing fonts is almost invisible,用户体验好
缺点：转为base64After the file is generally too large,If there are too many font files it will affect performance,The maximum value cannot be exceeded when the applet is packaged2M,Subcontracting is required;You can also specify text for output,This way the file will be much smaller.

方法二：cssIntroduced in the form of external links

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

@font-face {
    
  font-family: "HarmonyOSHeiTi";  /* The font name here is custom */
  src: url("https://h5.amemori.cn/h5/font-css/1.ttf"); /* 服务器上ttf文件的路径,Remember to configure domain authority */
  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、在需要用到的cssThe page imports this file and uses the font：

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

text{
    
  font-family: "HarmonyOSHeiTi";
}

优点：Does not occupy the applet memory
缺点：There is a delay when changing fonts,Users will clearly see the process of changing fonts.

方法三：jsIntroduced in the form of external links

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

wx.loadFontFaceIt is the WeChat official method of dynamically loading web fonts：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中直接使用familyThe font defined in .
The advantages and disadvantages are the same as method two

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

开发工具和ios都显示正常,但是Android font settings are invalid
解决办法：服务器配置cors,即可解决.