前端通过字体子集化方案来优化字体渲染体验
字体子集化
- 在很多时候，中问字体包提交会很大，在一下交互场景下，需要等待指定字体文件下载完成再渲染字体，造成的体验非常差
问题常见
- 场景1：对固定的几个文字，渲染不同的字体样式
- 场景2：输入不同的文字，渲染不同的字体样式
本地加载
每次下载字体文件后，将下载的字体文件load到DOM节点
async function loadFonts() {
/*
myfont: @font-face对应使用的字体
url: 字体文件对应url
*/
const font = new FontFace('myfont', 'url(myfont.woff)');
await font.load();
document.fonts.add(font);
document.body.classList.add('fonts-loaded');
}
字体子集化方案
/*
url: 字体文件url
textName: 需要下载的文字
*/
const font = await getFontApi(url, textName)
document.fonts.add(font)
究极方案
- 对于场景1，把一系列的字体文件合并为一个字体文件进行下载，减少文件请求次数
- 对于场景2，下载大的字体文件时，利用浏览器空闲时间下载
requestIdleCallback，通过indexedDB缓存文件
业务场景
- 下载指定字体文件，加载到document上
- 对于全量下载的文件，通用字体时，通过
indexedDB缓存到浏览器本地 - 对于设计师的自定义字体，通过对文件生成
MD5来判断文件是否发生更改来更新缓存
