小程序引入字体注意点

小程序引入字体有2种方式，
第一种是通过 @font-face ，第二种是通过小程序提供的方法 loadFontFace。

引入的方式不同但是需要注意的地方大致形同：

官方提出了以下的注意事项
字体文件返回的 contet-type 参考 font，格式不正确时会解析失败。
字体链接必须是https（ios不支持http)
字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略
‘2.10.0’ 以前仅在调用页面生效。

总的来说

1. 微信小程序端只支持网络字体，字体链接必须是https，所以本地引入的方法是行不通的。（想想也是。字体包动不动几个M，很难编译）
2. 引入中文字体，体积过大时会发生错误
3. 工具里提示 Faild to load font可以忽略 （不要看到开发者工具里提示就以为有问题）

这里记录几种解决字体引入的几种方式：

1. 字体转base64

• 打开字体在线转换工具 https://transfonter.org/
• 将下载解压后的css 文件打开，复制黏贴就好了
• 需要注意的是，这里的字体最大可以上传 10M

2. 第二种就是官方提供的一种方法，抽离出部分中文，减少体积，或者用图片代替。
图片代替我们都知道，这里记录一下抽离文字，对于抽离文字，我们需要利用一个工具
Fontmin

• 下载安装包后解压软件
  
• 在左侧输入我们能够使用到的文字，点击生成，就会得到一个新的字体库，这里面包括新的ttf 文件和 css引入文件。
• 最后只要看需要，不管是引入base64 还是引入新的 ttf 字体都是可以的。

3. 考虑插件
因为我使用的uni-app 这种多端开发，所以插件库里会有各种插件，这里官方推荐了一种字体引入的插件https://ext.dcloud.net.cn/plugin?id=954
（因为我还没有使用过这个插件，所以就不记录了，有兴趣的可以去看看）

以上