告别字体臃肿！这个神器让你的网页字体文件“瘦身”90%中文字体动辄几 MB，首屏直接被拖慢？minify-font 用“

大家好！今天给大家安利一个前端性能优化的“冷门”神器——minify-font。如果你曾为网页引入的漂亮中文字体包动辄好几MB而头疼，如果你对FCP（首次内容绘制）和LCP（最大内容绘制）指标锱铢必较，那么这个小工具绝对是你的菜。

一、痛点：美丽的负担

为了品牌统一或设计美感，我们在项目中引入自定义字体（尤其是中文字体）早已是家常便饭。但一个完整的 .ttf 或 .woff2 字体文件，包含成千上万个字符，体积巨大。而我们的网页可能只用到其中几十个字符（比如Logo、标题），却要让用户下载整个字体包。

这导致了什么？

首屏加载缓慢：字体成为关键请求的阻塞资源。
流量浪费：用户下载了大量永远用不到的字符数据。
体验打折：在字体加载完成前，可能出现页面布局偏移或不可见文本闪烁。

二、解决方案：`minify-font` 横空出世

minify-font 是一个基于 Node.js 的命令行工具，它的核心思想非常简单粗暴：“按需裁剪”。

举个例子：
你的官网品牌标题是“星辰科技”，引用了某个5MB的字体。minify-font 分析后发现，你只用了“星”、“辰”、“科”、“技”这四个字。那么，它就能生成一个可能只有几KB的新字体文件，只包含这四个字符的轮廓信息。

效果对比：

场景	原始字体文件	经 `minify-font` 处理后
品牌标题 “星辰科技”	~6 MB	~4 KB
一组图标字体 (20个图标)	~500 KB	~10 KB

体积减少超过90%是常态！ 这带来的性能提升是立竿见影的。

三、怎么用？三步搞定

使用起来极其简单，对构建流程友好。

安装：在你的项目中运行一条命令。
```
npm install minify-font -g
```

配置：在 package.json 中简单配置，指定字体与要保留的文字 (当然你也可以作为命令行独立使用)。

{
  “scripts”: {
    “minify-font”: “minify-font ./zcool-xiaowei.ttf -w '星辰科技' -o ./outpout”
  }
}

运行：执行命令，坐等瘦身完成。

npm run minify-font

# 输出内容
# Processing: ./zcool-xiaowei.ttf
# Using specified words only: 4 unique chars

# Generating 3 format(s): ttf, woff, woff2
#   ttf... ✓
#   woff... ✓
#   woff2... ✓

# ✓ Generated successfully:
#   ./outpout/zcool-xiaowei.min.ttf
#   ./outpout/zcool-xiaowei.min.woff
#   ./outpout/zcool-xiaowei.min.woff2

# -----------------------------
# CSS @font-face: zcool-xiaowei
# -----------------------------

# @font-face {
#   font-family: 'zcool-xiaowei';
#   src: url(./outpout/zcool-xiaowei.min.woff) format('woff'),
#        url(./outpout/zcool-xiaowei.min.ttf) format('truetype'),
#        url(./outpout/zcool-xiaowei.min.woff2) format('woff2');
# }

然后，在你的CSS中，将字体引用指向新生成的这个迷你文件即可 (甚至css代码都贴心写好一半)。

四、核心优势

极致的性能提升：从根本上减少字体资源体积，加速加载。
使用简单：命令行操作，几乎零学习成本，与现有工作流无缝集成。
格式支持：支持输入和输出多种主流字体格式（TTF, OTF, WOFF, WOFF2）。
智能分析：准确识别源代码中的字符使用情况，避免遗漏。

五、进阶功能与参数详解

除了基础的按源码分析，minify-font 还提供了强大的命令行参数，让你能更精细地控制输出结果。

1. 灵活的内置字符集（-c, --collection） 这是 minify-font 的一大亮点！它内置了实用的中文字符集，让你无需分析源码也能快速生成通用字体子集。

-c top500: 包含最常用的500个汉字，覆盖约80%的日常书面语。
-c top2500 (默认): 包含最常用的2500个汉字，覆盖超过99%的日常使用场景，是通用性最强的选择。
-c commonlyUsed: 常用字符集，包含汉字、字母、数字和标点。

2. 自定义字符（-w, --words） 你可以直接指定需要包含的字符。

单独使用 -w “星辰科技”: 生成只包含这四个字的字体。
结合 -c 使用 -c top500 -w “©®”: 在top500字符集的基础上，额外追加版权和注册商标符号。

3. 输出控制（-o, -f）

-o <路径>: 指定输出文件或目录。默认会在输入文件后添加 .min 后缀。
-f <格式列表>: 指定要生成的字体格式，用逗号分隔。例如 -f woff2,woff 会同时生成两种格式。默认生成 ttf,woff,woff2 三种。

4. 高级选项（--input-options, --output-options） 对于高级用户，可以通过JSON字符串传递底层字体处理库（fonteditor-core）的选项，进行更底层的控制，例如调整字重、倾斜度等。

完整参数速查：

-c, --collection <name>   使用预定义字符集: top500, top2500 (默认), commonlyUsed
-w, --words <words>       自定义字符:
                           - 单独使用: 仅包含这些字符
                           - 与 -c 联用: 追加到字符集后
-o, --output <output>     输出文件或目录 (默认: 与输入文件同路径，加 .min 后缀)
-f, --formats <formats>   要生成的格式，逗号分隔 (默认: ttf,woff,woff2)
--input-options <json>    输入字体选项 (JSON字符串)
--output-options <json>   输出字体选项 (JSON字符串)
-h, --help                显示帮助信息
-v, --version             显示版本号

六、适用场景

企业官网/品牌站：优化品牌标题、Slogan的专用字体。
营销落地页（Landing Page）：页面内容固定，字体使用字符集明确，优化效果极佳。
图标字体（Icon Font）：将图标字体裁剪到只包含项目中实际使用的图标。
任何对性能有极致要求的前端项目。

七、写在最后

在前端性能优化的军火库里，minify-font 可能不是最耀眼的，但绝对是解决字体加载问题最直接、最有效的“手术刀”。在大家都在卷图片懒加载、代码分割的时候，用上这个小工具，轻松实现字体加载的降维打击。

告别无谓的流量消耗，给用户的浏览器“减减负”吧！

项目地址： minify-font

快去试试，感受一下字体加载速度“飞起”的快乐！如果你有更好的字体优化技巧，也欢迎在评论区分享交流。

告别字体臃肿！这个神器让你的网页字体文件“瘦身”90%