网页字体Font压缩篇：终极优化方案——中文字体woff2分片加载

/**
 * 遍历某个文件夹里的文件的中文字体，生成压缩后的各个类型的字体文件
 */
// 使用的 v10 glob，如果报错可以检查下版本
const { glob } = require("glob");
const fs = require("fs");
const Fontmin = require("fontmin");
const path = require("path");

const outputDir = "src/fonts"; // 输出文件位置

const matchChinese =
  /[\u4e00-\u9fa5\u3000-\u301e\ufe10-\ufe19\ufe30-\ufe44\ufe50-\ufe6b\uff01-\uffee]/gmu;

// 不同字体对应的扫描文件，匹配方法
const fontData = [
  {
    files: ["content/**/*.@(md|mdx)", "src/**/*.@(ts|tsx)"],
    fontPath: path.resolve(__dirname, "../src/assets/HYWenHei-55W.ttf"),
    fontFamily: "HYWenHei",
    defaultText: `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,./;'[]\\\`-=<>?:\"{}|~!@#$%^&*()_+`,
    match(str) {
      return (str.match(matchChinese) || []).join("");
    },
  },
  {
    files: [
      "content/blog/rhymes/*.@(md|mdx)",
      "content/blog/secrets/poems.mdx",
    ],
    fontPath: path.resolve(__dirname, "../src/assets/AaKaiSong.ttf"),
    fontFamily: "AaKaiSong",
    defaultText: `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,./;'[]\\\`-=<>?:\"{}|~!@#$%^&*()_+`,
    match(str) {
      return (str.match(matchChinese) || []).join("");
    },
  },
  {
    files: [],
    fontPath: path.resolve(__dirname, "../src/assets/SourceCodePro-Medium.ttf"),
    fontFamily: "SourceCodePro",
    defaultText: `abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,./;'[]\\\`-=<>?:\"{}|~!@#$%^&*()_+`,
  },
];

const trimText = (text = "") => {
  const cache = Object.create(null);
  const arr = [];
  text.split("").forEach((char) => {
    if (!(char in cache)) {
      arr.push(char);
      cache[char] = true;
    }
  });
  return arr.join("");
};

const promiseList = fontData.map(async (item) => {
  const { files, fontPath, fontFamily, defaultText, match } = item;

  const filePaths = await glob(files);

  const matchTextArr = filePaths.map((file) => {
    const data = fs.readFileSync(file, "utf-8");

    const matchText = match(data);

    console.log(`读取${file}完成`);

    return matchText;
  });

  const textSubset = trimText(matchTextArr.join("") + defaultText);

  const fontmin = new Fontmin();

  const { name } = path.parse(fontPath);

  fontmin.src(fontPath);
  fontmin.use(
    Fontmin.glyph({
      text: textSubset,
      hinting: false,
    })
  );
  fontmin.use(Fontmin.ttf2woff());
  fontmin.use(Fontmin.ttf2woff2());
  fontmin.dest(outputDir);

  await new Promise((resolve, reject) => {
    fontmin.run(function (err, files) {
      if (err) {
        reject(err);
      }
      console.log(`写入字体${name}成功`);
      resolve();
    });
  });

  return `@font-face {
  font-family: ${fontFamily};
  src: url("./${name}.woff2") format('woff2'),
    url("./${name}.woff") format('woff'),
    url("./${name}.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
`;
});

Promise.all(promiseList).then((values) => {
  fs.writeFileSync(
    path.resolve(outputDir, "font.css"),
    `/* generated by srcipts/compressFont.js */
${values.join("")}
`
  );
});

/* generated by srcipts/compressFont.js */
@font-face {
  font-family: HYWenHei;
  src: url("./HYWenHei-55W.woff2") format('woff2'),
    url("./HYWenHei-55W.woff") format('woff'),
    url("./HYWenHei-55W.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: AaKaiSong;
  src: url("./AaKaiSong.woff2") format('woff2'),
    url("./AaKaiSong.woff") format('woff'),
    url("./AaKaiSong.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: SourceCodePro;
  src: url("./SourceCodePro-Medium.woff2") format('woff2'),
    url("./SourceCodePro-Medium.woff") format('woff'),
    url("./SourceCodePro-Medium.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

// 什么名字都行
const customText = (strs, ...params) => {
  const result = [];
  for(let i = 0, len = strs.length - 1; i < len; i++) {
    result.push(strs[i], params[i])
  };
  result.push(strs[strs.length - 1]);
  return result.join('');
};
// custom file
const title = customText`示例字体`;

const { parse } = require('@babel/parse');
const traverse = require('@babel/traverse').default;

const ast = parse(code, {
  sourceType: 'module'
});

const words = [];

traverse(ast, {
  /** customFont`需要被扫描的中文文案`*/
  TaggedTemplateExpression(path) {
    const node = path.node;
    if (node.tag.name === 'customFont') {
      const spans = node.quasi.quasis;
      const spansText = spans.map(v => v.value.cooked);
      words.push(spansText.join(''));
    }
  },
})

npm install --save-dev font-slice
yarn add -D font-slice

const createFontSlice = require('font-slice');

createFontSlice({
  // fontPath
  fontPath: path.resolve(__dirname, 'YourPath.ttf'),
  // outputDir
  outputDir: path.resolve(__dirname, './output'),
})