uniapp加载第三方字体方案对比（附原生微信小程序方案）
文章目录
- 官方文档
- uniapp文档
- 微信小程序文档
- 下载字体包
- 引入方案
- 限制
- 微信小程序限制
- uniapp的限制
- 方案对比
- 方案1：CSS本地加载
- 方案2：CSS远程加载
- 方案3：转换为base64，然后通过css引入
- 方案4：使用uni.loadFontFace()
- 页面使用
- 字体包压缩（这里提供2种自用的方案）
- 提取常用的几千个字
- 手动指定需要哪些字
- 遇到的问题
- 本地的开发者工具可以查看，但是体验版和真机调试不可以
- 苹果手机可以，但是安卓手机不可以
官方文档
uniapp文档
https://zh.uniapp.dcloud.io/api/ui/font.html#loadfontface
微信小程序文档
https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html
下载字体包
我这里使用的是https://www.fonts.net.cn/
需要注意商用授权的问题哦
引入方案
限制
微信小程序限制
uniapp的限制
方案对比
| 优点 | 缺点 | |
|---|---|---|
| 方案1 | 方便，下载下来直接能够使用 | 小程序不支持使用本地文件 |
| 方案2 | 不占文件大小 | 需要服务器支持，字体文件太大不能用，安卓没有效果 |
| 方案3 | 不需要服务器支持 | 文件太大不能用，而且不美观 |
| 方案4 | （推荐！）没有兼容性问题 | 比较麻烦，需要有https，请求头有限制（但是这个我没有特意处理也是ok的），需要配置开发者后台 |
方案1：CSS本地加载
（如/static/fonts），然后在app.vue的style中引入
@font-face {font-family: my-font;src: url('~@/static/my-font.ttf');
}
方案2：CSS远程加载
在app.vue的style中引入
@font-face {font-family: my-font;src: url('https://XXXXX/font.ttf');
}
方案3：转换为base64，然后通过css引入
用工具将ttf文字文件，转成base64形式，并通过css引入
可以使用这个网站https://www.giftofspeed.com/base64-encoder/
在app.vue的style中引入（或者新建一个css文件，然后app.vue种进行import也可以）
@font-face {font-family: my-font;src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');
}
或者
@import '~@/static/font/font-name.css';
方案4：使用uni.loadFontFace()
注意！！！：官网说这个api在app.vue的onLoad生命周期中调用
但是我调用之后，根本没效果，success fail complete回调都不触发
最后各种尝试，终于在页面文件中的onLoad调用是生效的
uni.loadFontFace({family: 'my-font',source: 'url("https://xxx.ttf")',success() {console.log('success')}
})
页面使用
就像正常字体一样使用即可
.title {font-family: my-font;
}
字体包压缩（这里提供2种自用的方案）
提取常用的几千个字
这种用于原先的字体包就不大的（大概减少40-50%）
https://github.com/DeronW/minify-font
比如我压缩了2个字体
7.09MB => 3.22MB1004.46KB => 677.58KB
手动指定需要哪些字
这种适用于用到的文字很少的情况
https://juejin.cn/post/7161359760023879693
遇到的问题
本地的开发者工具可以查看，但是体验版和真机调试不可以
服务器的链接需要是https的
苹果手机可以，但是安卓手机不可以
是cors跨域问题，可以参见这篇文章 https://blog.csdn.net/weixin_44786530/article/details/134965082
-
需要在微信小程序的
开发者后台 => 开发管理 => 服务器域名 => downloadFile合法域名添加字体文件所在的服务器域名 -
配置
nginx跨域location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$ { add_header Access-Control-Allow-Origin *; }