本文主要是介绍前端通过字体子集化方案来优化字体渲染体验，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

字体子集化

• 在很多时候，中问字体包提交会很大，在一下交互场景下，需要等待指定字体文件下载完成再渲染字体，造成的体验非常差

问题常见

• 场景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来判断文件是否发生更改来更新缓存

资料

• fontmin
• font-spider
• font-collecrot 字体分割工具
• fontforge 字体合并

这篇关于前端通过字体子集化方案来优化字体渲染体验的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！