search

xccjk / x-blog

学习笔记
17 stars 2 forks source link

字体子集化 #49

Closed xccjk closed 2 years ago

xccjk commented 3 years ago

字体子集化

问题常见

本地加载

每次下载字体文件后，将下载的字体文件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)

究极方案

业务场景

资料