小程序引入字体有2种方式,
第一种是通过 @font-face ,第二种是通过小程序提供的方法 loadFontFace。
引入的方式不同但是需要注意的地方大致形同:
官方提出了以下的注意事项
字体文件返回的 contet-type 参考 font,格式不正确时会解析失败。
字体链接必须是https(ios不支持http)
字体链接必须是同源下的,或开启了cors支持,小程序的域名是servicewechat.com
canvas等原生组件不支持使用接口添加的字体
工具里提示 Faild to load font可以忽略
‘2.10.0’ 以前仅在调用页面生效。
总的来说
- 微信小程序端只支持网络字体,字体链接
必须是https ,所以本地引入的方法是行不通的。(想想也是。字体包动不动几个M,很难编译)
- 引入中文字体,体积过大时会发生错误
- 工具里提示 Faild to load font可以忽略 (不要看到开发者工具里提示就以为有问题)
这里记录几种解决字体引入的几种方式:
1. 字体转base64
2. 第二种就是官方提供的一种方法,抽离出部分中文,减少体积,或者用图片代替。
图片代替我们都知道,这里记录一下抽离文字,对于抽离文字,我们需要利用一个工具 Fontmin
- 下载安装包后解压软件
- 在左侧输入我们能够使用到的文字,点击生成,就会得到一个新的字体库,这里面包括新的ttf 文件和 css引入文件。
- 最后只要看需要,不管是引入base64 还是引入新的 ttf 字体都是可以的。
3. 考虑插件
因为我使用的uni-app 这种多端开发,所以插件库里会有各种插件,这里官方推荐了一种字体引入的插件https://ext.dcloud.net.cn/plugin?id=954
(因为我还没有使用过这个插件,所以就不记录了,有兴趣的可以去看看)
以上
|
请发表评论