FontEditor

定义

FontEditor 是一个运行在浏览器内的字体编辑器，主要用于对字体文件进行读取、修改、格式转换与效果预览。它采用纯前端方式实现，用户打开页面即可载入本地字体文件进行处理，不需要安装独立的桌面程序^[1]。

在格式支持上，它可以导入 TTF、WOFF、WOFF2、SVG 字体、EOT 与 OTF 等字体文件，并可导出 TTF、WOFF、WOFF2 等格式，从而在多种网页字体格式之间完成互转^[2]。这一特性使字体格式兼容处理不必依赖多款专业软件。

与面向整套字体排印流程的桌面字体设计软件不同，FontEditor 的重点在于字形轮廓调整、代码点设置与网页字体生成，其定位更接近轻量的字体管理与加工工具^[1]。

原理

FontEditor 的核心是一个可以读写 sfnt 结构字体文件的 JavaScript 库 fonteditor-core。该库把字体文件解析成包含 head、maxp、glyf、cmap、name、hhea、post 等表的数据对象，修改完成后重新序列化为目标格式的文件^[3]。字形轮廓、字符映射与字体度量信息都保存在这些表中，因此编辑操作最终体现为对这些表数据的改写。

字形是编辑的基本单位。每个字形通过 cmap 表中的字符编码与 Unicode 代码点对应，渲染引擎按代码点查找字形并绘制；网页字体图标通常使用私用区码位 0xE000 至 0xF8FF 作为对应代码点^[1]。字形的左右边轴决定相邻字符之间的间距，上下边界对应 CSS 中的上缘与下缘，批量调整这些度量即可统一图标的视觉尺寸^[1]。

轮廓编辑以贝塞尔路径为基础，支持对路径求并集、交集、差集以及切割、对齐、翻转等布尔与变换操作；早期版本使用自有路径库，2016 年 3 月改用了 paper.js 的路径库。项目在 2015 年 1 月把数据存储方式改为 IndexedDB，使字体项目可以保存在浏览器本地。

对于 WOFF2 这类压缩格式，fonteditor-core 借助编译为 WebAssembly 的 Google WOFF2 编解码模块完成解压与压缩，调用前需要先初始化该模块^[3]。

发展历程

FontEditor 项目自 2014 年起公开发布版本记录：2014 年 10 月 7 日推出 TTF 管理器，10 月 19 日推出 TTF 编辑器。同年 10 月至 11 月间，编辑器陆续增加了路径的合集、交集、差集运算，SVG 弧线指令支持以及路径切割、智能吸附和编辑器设置等功能。

2015 年是功能扩展较集中的一年：1 月改进存储方式并支持用方向键调整字形顺序，2 月加入轮廓曲线拖拽与撤销操作，3 月支持从图像导入字形，4 月加入字体同步、OTF 读取与转 TTF 功能，5 月发布英文版本，7 月将核心模块拆分为独立的 fonteditor-core 以便维护。

2016 年上半年，复合字形编辑、字形导出为 SVG 和 PNG、字体同步的拉取与推送、旋转吸附等功能相继加入。2019 年 10 月，项目使用 ES6 模块进行重构，并于同月支持 WOFF2 的读写，发布第 2 版。作为独立软件包的 fonteditor-core 持续更新，至 2025 年 8 月已发布 2.6.3 版^[4]。

应用

FontEditor 最常见的用途是制作网页字体图标。将 SVG 图标导入编辑器后批量设置 Unicode 代码点，再导出为 TTF 或 WOFF 等格式，即可在网页中通过字体方式调用图标，避免为每个图标单独加载图片^[1]。

在字体体积控制方面，工具可以对字形集合进行裁剪与优化，只保留实际用到的字符，从而减小字体文件大小、缩短网页加载时间^[3]。fonteditor-core 提供按 Unicode 查找字形、合并其他字体、复合字形转简单字形以及字形排序等接口，便于在构建流程中自动处理字体^[3]。

fonteditor-core 以 npm 软件包形式发布，除浏览器端外也可在 Node.js 环境中调用，因此能够被集成进前端工程化流程，用于格式转换与字形调整等自动化任务^[3]。项目说明中还提到同生态的 字体子集化 工具 fontmin，二者常配合完成网页字体的裁剪与产出。

局限

FontEditor 面向的是单字形轮廓与字体格式层面的加工，并不具备完整的专业字体设计流程。项目发布记录显示其主要功能集中在字形导入、轮廓编辑、代码点设置与格式导出上，未涉及 OpenType 特性编排等排印高级环节。

在格式支持上，导入与导出并不完全对等。OTF 相关的处理仅限于读取并转换为 TTF，不能直接写出 OTF；EOT 与 SVG 字体的写出能力也未列入导出格式之中^[3]。

作为浏览器端工具，其处理能力受运行环境限制。WOFF2 的读写依赖额外的 WebAssembly 模块，必须先完成初始化；同时工具链依赖 JavaScript 运行时，处理大体积、多字符集字体时性能不及本地编译的桌面软件^[3]。

工具的输出质量仍取决于使用者对字形度量参数的理解，左右边轴、上下边界等设置需要人工判断，编辑器本身不对字形的视觉合理性作出校验^[1]。

参见

• 字体 —— FontEditor 所处理的数据对象，包含字形、字符映射与度量信息。

• TrueType —— FontEditor 主要读写与转换的字体格式之一。

• Web字体 —— FontEditor 常用于生成供网页加载的字体文件。

• 字形 —— 字体编辑中的基本操作单位。

• 字体子集化 —— 与 FontEditor 配合使用的字体体积优化手段。

• FontForge —— 另一款开源的桌面字体编辑软件，定位与 FontEditor 不同。