字体加载优化

字体源文件大小将近 50m, 如果在慢网的情况下，文件需要加载很久。

字体加载分为三种情况：

• 全量加载，文件和源文件大小一致，加载缓慢
• 部分字体加载，例如页面有特殊字体的文案，需要对这些文件进行加载，而不是加载 50mb 的文件。涉及到字体的提取技术。
• 分包加载，将 50mb 的文件拆分成十几个小文件

全量加载

@font-face {
	font-family: "xxx";
	src: local("xxx"), url("字体路径") format("woff");
	font-style: normal;
	font-display: swap;
	font-weight: 400;
}

部分字体加载-字体提取

优化的方向如下：

# 安装 glyphhanger
npm install -g  glyphhanger

# 安装fonttools, macos可以使用 brew install fonttools
# 具体参考文档 https://github.com/zachleat/glyphhanger#readme

# 执行命令
glyphhanger \
  --chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --spider \
  --subset=fzkt.ttf \
  --formats=woff2 \
  --US_ASCII \
  wangxiaoze


# 或者
glyphhanger wangxiaoze --subset=fzkt.ttf

# 或者
glyphhanger --chrome="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --whitelist="wangxiaoze" --subset fzkt.ttf

命令 1：最完整的爬取 + 仅 ASCII 字符

特点：

• —spider：递归爬取该 URL 及其链接的页面
• —US_ASCII：仅包含 US-ASCII（基本拉丁字符，不含中文）
• —formats=woff2：只生成 WOFF2 格式
• 文件大小：最小（仅英文、数字、基本标点）

命令 2：单页分析 + 所有字符

特点：

• 无—spider：只分析单个页面
• 无字符集限制：包含页面实际使用的所有字符（含中文）
• 无—formats：默认生成 WOFF、WOFF2、TTF 三种格式
• 文件大小：中等（取决于单页使用的字符）

命令 3：指定浏览器 + 白名单（但可能无效）

特点：

• —whitelist：未配合—spider 时通常无效
• 无字符集限制：包含页面实际使用的所有字符
• 无—formats：默认生成三种格式
• 文件大小：与命令 2 相近（单页分析）

文件大小对比

重要差异总结

1. 字符集范围：
   • 命令 1：仅 ASCII，不含中文
   • 命令 2 和 3：包含页面实际使用的所有字符（含中文）
2. 爬取范围：
   • 命令 1：多页面（递归爬取）
   • 命令 2 和 3：单页面
3. 输出格式：
   • 命令 1：仅 WOFF2
   • 命令 2 和 3：WOFF + WOFF2 + TTF（三个文件）

建议

• 如果网站主要是中文：使用命令 2，或给命令 1 添加—whitelist 参数包含中文
• 如果需要最小体积且只有英文：使用命令 1
• 如果需要多页面字符：使用命令 1 的—spider 模式

注意: 命令 1 的—US_ASCII 会排除中文，如果网站有中文内容，生成的字体将无法显示中文。

分包优化

地址：

• 工具地址
• github