uniapp加载第三方字体方案对比（附原生微信小程序方案）

文章目录

官方文档

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中引入

css 复制代码

@font-face {
    font-family: my-font;
    src: url('~@/static/my-font.ttf');
}

方案2：CSS远程加载

在app.vue的style中引入

css 复制代码

@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也可以）

css 复制代码

@font-face {
    font-family: my-font;
	src: url(data:application/font-ttf;charset=utf-8;base64,YOUR BASE64 STRING HERE) format('truetype');
}

或者

js 复制代码

@import '~@/static/font/font-name.css';

方案4：使用uni.loadFontFace()

注意！！！：官网说这个api在app.vue的onLoad生命周期中调用

但是我调用之后，根本没效果，success fail complete回调都不触发

最后各种尝试，终于在页面文件中的onLoad调用是生效的

js 复制代码

uni.loadFontFace({
  family: 'my-font',
  source: 'url("https://xxx.ttf")',
  success() {
      console.log('success')
  }
})

页面使用

就像正常字体一样使用即可

css 复制代码

.title {
	font-family: my-font;
}

字体包压缩（这里提供2种自用的方案）

提取常用的几千个字

这种用于原先的字体包就不大的（大概减少40-50%）

https://github.com/DeronW/minify-font

比如我压缩了2个字体

7.09MB => 3.22MB
1004.46KB => 677.58KB

手动指定需要哪些字

这种适用于用到的文字很少的情况

https://juejin.cn/post/7161359760023879693

遇到的问题

本地的开发者工具可以查看，但是体验版和真机调试不可以

服务器的链接需要是https的

苹果手机可以，但是安卓手机不可以

是cors跨域问题，可以参见这篇文章 https://blog.csdn.net/weixin_44786530/article/details/134965082

需要在微信小程序的开发者后台 => 开发管理 => 服务器域名 => downloadFile合法域名添加字体文件所在的服务器域名

配置nginx跨域

shell 复制代码

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{
add_header Access-Control-Allow-Origin *;
}