跳到正文

字体子集化

Font Subsetter

把 TrueType 字体裁到你的文字真正用到的那些字形,还能顺手包成 WOFF——中文和韩文网页字体从几兆变成几十 KB,差别就在这一步。

把一个 TrueType 字体裁到页面实际用到的字符,从剩下的部分重建一个有效的文件。对韩文来说,这是几兆的下载和两百来 KB 之间的区别,因为完整的韩文字体带着 11,172 个音节,而一个页面用几百个。它可以在 TTF 之外一并输出 WOFF,并且在提供之前重新解析自己的输出。

🔒 完全在你的浏览器里运行fontsubsetperformancewebfont

放一个 TTF 文件进来

只支持 TrueType 轮廓(.ttf,或者带 glyf 表的 .otf)。一切都在这个标签页里完成。

它是怎么裁的

  • · 保留你要的那些字符的字形,以及它们引用的部件字形(复合字形的闭包),然后重写 glyf·loca·hmtx·hhea·maxp·cmap(格式 4 和 12)和 post。表的校验和以及 head.checkSumAdjustment 都会重新算过。
  • · 生成的文件会用同一个解析器再读一遍,通过了才给你。提示程序(fpgm·prep·cvt)原样保留。
  • · 漏掉的字符会显示成一个空方块。把页面上的真实文本贴进来;如果是韩文,就打开 KS X 1001 的 2,350 音节集合。

想先看看这个字体,字体文件查看;只想换个格式,字体格式转换。

怎么用

  1. 拖入一个 TrueType 文件

    一个 `.ttf`,或者一个内部是 TrueType 轮廓的 `.otf`。文件一打开面板就会说明它是哪一种,因为 CFF 字体在这里无法子集化。

  2. 粘贴页面用到的文字

    复制真实的文案——标题、标签、按钮文字、错误信息。重复的会自动合并。任何你漏掉的都会在最终页面上渲染成空白方框,所以宁可多包含一些。

  3. 在你的文字和标准集之间做决定

    这是真正的决定。只粘你的文字给出最小的文件,而在有人往输入框里敲一个名字的那一刻就坏了。打开 KS X 1001 的 2,350 个音节集给出一个更大的文件,能扛住任意的韩文输入。静态营销文案要第一种;任何带用户内容的要第二种。这里的标准集只有这一个韩文集,没有中文的标准字符集选项——中文只能靠你粘进来的文字。

  4. 构建并读数字

    前后的字形数、前后的字节数,以及节省的百分比。如果你要求的某个字符在字体里没有,它会被列出而不是悄悄丢掉。

  5. 取文件和旁边的 @font-face

    声明用从字体自己的 OS/2 和 post 表里读出的字重和斜体标志生成,所以它和文件相符,而不是猜的。

常见问题

它拒绝了我的 OTF。为什么?

因为那个文件是 CFF(PostScript)轮廓,子集化它意味着用另一种轮廓格式重写字符串——那是和裁 TrueType `glyf` 记录不同的另一个程序,而这里做的是后者。页面会说明这一点,而不是产出一个坏文件。在桌面上用 fonttools 的 pyftsubset。查看这个字体仍然可以。

字距调整和连字会保留吗?

不会。`GPOS` 和 `GSUB` 被丢掉,丢掉时页面会列出它们。对拉丁文字来说这意味着子集里没有字距对、没有连字;对韩文很少要紧,因为韩文的组合在字形本身里。如果字距调整对你至关重要,改用 fonttools 子集化,它能重写这些表。

可变字体会怎样?

它以默认实例输出——变体表不会带过去。对子集来说这通常没问题,因为子集是上线用的产物而不是工作文件,但如果你依赖某个轴,就子集化你实际使用的那个静态实例。

它能做 WOFF2 吗?

不能。WOFF2 需要 Brotli,浏览器不给页面。WOFF 可以,用 `CompressionStream("deflate")` 生成——通常在 TTF 的基础上再减 40–50%。WOFF2 在此之上大约还能再减 20–30%,那需要桌面工具。

有些字符变成了空方框。

构建子集时它们不在字符列表里。这是子集化的全部交换条件:文件只包含你要求的东西。加上缺失的字符重新构建,或者打开 KS X 1001 集,让任意的韩文输入有地方落。

可以从这些接进来

接下来

这些工具吃得下当前工具的产出,结果可以直接送过去。