企业官网建设流程全解析

Maple Mono WOFF2 压缩实现手记：一份变量字体 TTF 缩到三分之一

【免费下载链接】maple-fontMaple Mono: Open source monospace font with round corner, ligatures and Nerd-Font icons for IDE and terminal, fine-grained customization options. 带连字和控制台图标的圆角等宽字体，中英文宽度完美2:1，细粒度的自定义选项项目地址: https://gitcode.com/GitHub_Trending/ma/maple-font

Maple Mono 的落地页能在浏览器里实时切换字重，但页面实际下载的字体只是约 128 KB 的 WOFF2（Web Open Font Format 2，W3C 定义的网页字体封装格式），而不是仓库里 414 KB 的 TTF 源文件。这款圆角等宽字体的变量轴与连字数据，都被打包进了这个更小的文件。

TTF 与 WOFF2 体积对照

常规体与斜体两个变量字体的源文件和产物都直接提交在仓库中，数字可以直接核对：

需要说明的是，这份 WOFF2 是不含 Nerd-Font 图标的基础字体；带图标的完整版本 TTF（如source/MapleMono-NF-Base.ttf）约 1.9 MB，图标版压缩幅度更大，但构建耗时也更长，所以落地页只发布了基础变量字体。

为什么能压到这种比例

• Brotli 压缩后端：WOFF2 把 TTF 逐表封装，表数据改用 Brotli 算法压缩。Brotli 是 LZ77 的改进实现，压缩比高于 WOFF1 使用的 DEFLATE。
• 字形级重编码：glyf表中的轮廓按单个字形拆解，控制点少的简单字形用更紧凑的编码重写，而不是原样存储。
• 变量字体轮廓连续：wght 变量字体把全部字重放进同一套轮廓流，字重之间不存在重复的字形数据，给 LZ77 滑窗留下了可复用的冗余。
• 特性表冗余高：这款字体的 GSUB/GPOS 里带有大量连字与 cv/ss 自定义选项，重复性结构正是 Brotli 擅长压缩的内容。

项目里的压缩流水线

依赖关系在 requirements.txt 中声明：fonttools==4.62.1是转换核心，brotli==1.2.0提供压缩后端，foundrytools-cli==2.1.1提供命令行工具。入口是 task.py 的page --woff2子命令，实际逻辑在 source/py/task/page.py，分三步：

1. 用--ttf-only --no-nerd-font --least-styles参数运行 build.py，只产出最小的变量 TTF 到fonts/Variable
2. 执行ftcli converter ft2wf -f woff2把该目录下的 TTF 批量转为 WOFF2
3. 重命名并把产物挪进落地页的字体目录

if woff2: print("Update woff2") font_dir = joinPaths(submodule_path, "public", "fonts") os.system("python build.py --ttf-only --no-nerd-font --least-styles") os.system(f"ftcli converter ft2wf -f woff2 {var_dir}") shutil.rmtree(font_dir, ignore_errors=True) os.makedirs(font_dir, exist_ok=True) for filename in os.listdir(var_dir): if filename.endswith(".woff2"): os.rename( joinPaths(var_dir, filename), joinPaths(font_dir, filename.replace(".ttf.woff2", "-VF.woff2")), )

最终文件存放在 woff2/var/，命名从.ttf.woff2改为-VF.woff2由上面最后一步的 rename 完成。

两种拿到 WOFF2 文件的方式

💡直接引用：仓库已有预构建产物，网页的@font-face里直接指向woff2/var/MapleMono[wght]-VF.woff2，斜体换成 Italic 文件名即可。

自行构建（想改 hinting、宽度或特性组合时）：

1. git clone https://gitcode.com/GitHub_Trending/ma/maple-font
2. pip install -r requirements.txt
3. python build.py --ttf-only --no-nerd-font --least-styles
4. ftcli converter ft2wf -f woff2 fonts/Variable

第 4 步完成后 WOFF2 就生成在fonts/Variable目录下；也可以跳过 3、4 两步，直接跑python task.py page --woff2一次完成。

延伸

• README.md 与 README_CN.md：构建脚本的完整参数说明，包括--width（default 600 / narrow 550 / slim 500）和--feat特性冻结
• source/py/：特性文件生成与浏览器端特性切换的代码，连字和自定义选项都来自这里

落地页的字体加载已经足够轻，如果你的项目也想用 Maple Mono，直接从 WOFF2 目录开始即可；想跟进压缩参数的调整，可以在项目的讨论区留言。

【免费下载链接】maple-fontMaple Mono: Open source monospace font with round corner, ligatures and Nerd-Font icons for IDE and terminal, fine-grained customization options. 带连字和控制台图标的圆角等宽字体，中英文宽度完美2:1，细粒度的自定义选项项目地址: https://gitcode.com/GitHub_Trending/ma/maple-font