一、使用css引入
1. 使用网络路径。将字体文件放云端，不占用本地资源。
// 在APP.vue进行全局引入
@font-face{
font-family: my-font;
src:url('https://XXXXX/font.ttf');
}
// 在所有页面可直接使用
.box{
font-family: my-font;
}
注意：真机情况下,ios可正常显示，安卓失效。这是因为跨域，需要后端解决一下
2. 使用base64。通过将字体文件转化为base64,在本地引用，小体积文件可使用此法。
将文件通过 transfonter.org 转换为base64在本地使用
(具体步骤参考blog.csdn.net/Kiros_Jiang… )
二、使用js引入(推荐)
前提： 当字体文件过大，无法使用base64；使用css引入，出现先展示默认字体，过一段时间展示自定义字体问题等，推荐使用此法。
相关文档：uni.loadFontFace
步骤如下：
- 全局使用： 在app.vue文件的onLaunch中加载字体文件，然后在对应页面直接用即可
uni.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
global： true, // 设置为true 全局生效
success() {
console.log('success')
}
})
- 部分页面使用 在对应页面的onLoad中加载字体文件，然后直接用即可
uni.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success() {
console.log('success')
}
})
三、其他问题
- 字体文件过大
-
只想使用某几个文字或数字，但字体文件过大，怎么办
解决办法：
-
前端使用transfonter.org 处理字体文件，使用过滤后的字体文件
下面给个过滤例子：
- 英文+数字+标点符号 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,;:!?(){}[]'"@#$%^&*-+=/|~<>
- 某几个中文 直接列上去就行
-
-
字体文件过大，所有文字都想使用
解决办法：
找后端动态返回，这个方法是网上大佬们给的，俺还没试过🤨，请自行百度
-
使用oss线上链接，模拟器好好的，到安卓机就是不生效，报错# loadFontFace:fail loadFontFace:fail Anetwork er或fail A network error occurred这种网络错误（找了一个小时才找到症结，太坑了）
解决办法：
跨域了，找后端配跨域，阿里/腾讯的oss用起来都得配跨域（字体文件小的也可以转base64放本地） 参考链接：blog.csdn.net/2201_756970…
