首页 > 网页制作 >Fontize：Nuxt最简单的字体裁剪工具

Fontize：Nuxt最简单的字体裁剪工具

来源：互联网 2026-07-31 17:08:02

中文网站字体优化一直是前端开发者面临的难题。一套优质中文字体如思源宋体，源文件动辄十几 MB，直接让用户下载显然不现实。多数情况下，网站只能退回到系统默认字体，接受各平台参差不齐的渲染效果。但一个页面实际需要渲染的字符，往往只有几百个。为几百字的页面加载包含两万多个字符的字体文件，资源浪费高达三个

中文网站字体优化一直是前端开发者面临的难题。一套优质中文字体如思源宋体，源文件动辄十几 MB，直接让用户下载显然不现实。多数情况下，网站只能退回到系统默认字体，接受各平台参差不齐的渲染效果。

但一个页面实际需要渲染的字符，往往只有几百个。为几百字的页面加载包含两万多个字符的字体文件，资源浪费高达三个数量级。字体文件裁剪技术正是解决这一痛点的关键。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

字体子集化：只打包页面用到的字符

字体子集化（font subsetting）的核心思路是将字体文件裁剪到仅包含实际用到的字符。相关工具链其实早已存在，比如 pyftsubset、subset-font。真正的难点不在“裁剪”本身，而在于“如何准确获知页面使用了哪些字符”：

手动维护字符清单，容易遗漏字符；
文案更新后，清单需要重新整理，字体文件也要重新裁剪；
接口返回的动态文本，在构建阶段根本无法获取。
3500 常用字清单虽然可用，但不够精准。

fontize 的目标正是解决这一环节：让组件自行声明将要渲染的文本，工具链负责自动收集和裁剪，开发时实时生效，构建时自动产出。

Fontize：Nuxt最简单的字体裁剪工具

fontize 使用方法

fontize 是一个 pnpm monorepo 项目，要求 Nuxt 4.5 及以上版本。

第一步，安装并注册字体：

 复制代码// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@fontize/nuxt'],
  fontize: {
    fonts: [
      { alias: 'noto-serif', src: './fonts/NotoSansSC.ttf' },
      // 同别名多字重共享同一字符集
      { alias: 'noto-serif', src: './fonts/NotoSansSC-Bold.ttf', weight: 700 },
    ],
  },
})

第二步，在组件中声明文本：

 复制代码

第三步，正常开发和构建：

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

完成以上配置即可。无需手动运行命令行工具，也无需维护字符清单。

fontize 技术原理

开发模式下，SSR 和浏览器会将声明过的文本通过 HTTP 上报给 dev server 的收集端点，触发子集重建。重建完成后，通过 HMR 热替换 fonts.css 的 link 引用，而非整页刷新——新 CSS 指向新 hash 的 woff2 文件，浏览器重新下载，组件状态不丢失。文本动态变化时按防抖策略（默认 300ms）重新收集。

构建时存在两条收集通道：SSG 的 prerender 阶段在主进程内直接收集；同时，一个 vite 插件会静态扫描源码，将 useText('字面量', ...) 这类可静态求值的声明直接提取进字符集——因此纯 SPA（ssr: false）执行 nuxi build 也能获得裁剪好的子集。产物在构建收尾时统一写入磁盘，woff2 按内容 hash 命名，配合内容寻址的本地缓存，重复构建不会重复裁切。

从实际效果来看，以 NotoSansSC 为例：源文件约 17MB，一个常规内容量的站点裁剪后通常在几十 KB 量级。

适用范围与边界说明

fontize 有明确的适用场景，使用前需要了解以下限制：

运行时才出现的动态文本不会纳入子集。构建期能获取的是 prerender 渲染的文本和源码中的静态字面量；接口数据、CMS 新文章等运行时内容会缺字。兜底方案是使用 include 配置将可能的字符集（如常用汉字表）注入种子。
静态提取只认字面量：useText 的文本参数需写成字符串字面量（或无插值模板、字面量数组），并从 @fontize/vue 直接导入。传变量或 getter 的声明在纯 SPA 构建中无法提取（SSG 不受影响，prerender 会渲染到终态）。
同一 alias 的字符集是全站页面并集，不按路由拆分。多路由共享一个子集，切换页面不会重新裁切。
浏览器端生产环境不再收集，useText 在生产浏览器中为空操作。
因此，fontize 最适合内容在构建期即确定的站点：SSG 的博客、文档站、营销页，以及大屏等以静态文本为主的纯 SPA。