做中文网站的人，多少都纠结过字体这件事。不过，

为什么字体体积成了致命痛点？

想用一款好看的中文字体。比如思源宋体，源文件十几 MB。直接让使用者下载显然不现实于是大多数时候只能退回程序默认字体，接受各网站渲染效果参差不齐。怎么说呢，

一个页面实际渲染的字符。可能只有几百个，为了一个几百字的页面加载一个包含两万多个字的字体文件，这里面的浪费是三个数量级。话说回来，

至于子集化。只打包用到的字

这个思路叫 字体子集化把字体文件裁剪到只包含实际用到的字符。不过，工具链其实一直存在比如 pyftsubsetsubset-font。

真正的麻烦不在「裁」而在「怎么知道页面用了哪些字」：

• 手动维护一份字符清单，注定漏字；
• 文案一改。清单要重新整理，字体要重新裁；
• 接口返回的动态文本，建立期根本拿不到；话说回来，
• 常见字清单。中规中矩，却难以覆盖所有业务场景。

fontize 想解决的就是这一步：让组件自己声明会渲染什么文本。工具链负责收集和裁剪，开发时实时生效，建立时自动产出。

至于快速上手，完整用法示例

1️⃣ 安装并注册字体

// nuxt.config.ts
export default defineNuxtConfig({
modules:,fontize: {
从fonts来看，}。})

2️⃣ 在组件里声明文本

3️⃣ 正常开发与建立

pnpm dev # 浏览器/SSR 上报文本 → 实时重建子集
pnpm build # 静态提取声明过的字面量 → 产出子集
pnpm generate # prerender 收集 + 静态提取 → 产出 fonts.css + hash 命名的 woff2

就这些。 其实，不需要手动跑命令行工具，不需要维护字符清单。

内部实现原理，一窥究竟

开发阶段：

• SSR 与浏览器端把所有 useText 声明的文本通过 HTTP 上报给 dev server 的收集端点；
• 收到新文本后触发子集重建；老实说，完成后通过 HMR 热替换 页面不会整体刷新——新 CSS 指向新 hash 的 woff2。浏览器重新下载，而组件状态保持不变。
• 动态变化的文本采用防抖重新收集，以免频繁裁剪。

建立阶段：

• S S G 阶段： prerender 时在主进程内直接收集渲染出的文字。
• Vite 插件： 静态扫描源码。把能够在编译时求值的 useText) 提取进字符集合——即使是纯 SPA（) 执行 ,子集也能生成。
• 所有子集统一落盘为 woff2 文件。并按内容 hash 命名，实现内容寻址缓存；重复建立时若内容未变则无需 裁切。

压缩效果示例：

NotoSansSC 源文件约 17 MB 几十 KB

使用边界与限制，需要先了解！