简体 ▾
Free, Fast & Secure Online Tools
WOFF 是 Web Open Font Format 的缩写，而要先搞懂的第一件事是：它不是一种新的字体。它是一个外壳：一个既有的 TrueType 或 OpenType 字体，压缩过，附上一点元数据，包装成浏览器可以快速下载的形式。
里面的字形没有改变。改变的是它们移动的效率。
实务建议难得地简单：只提供 WOFF2。网页指南以前建议的那些旧后备——WOFF、TTF、EOT、SVG 字体——现在都是每一个访客的浏览器会忽略的死重量。
TTF 和 OTF 在浏览器里确实能用，但它们带着网页不需要的桌面包袱，而且大得多。它们属于你的电脑，不属于一个页面。
这就是网页字体不再是一个已解决问题的地方，而且值得用数字讲清楚。
一个拉丁字体涵盖大概 200 到 400 个字符——字母、数字、标点、重音。做成 WOFF2 通常是 20 到 50 KB。微不足道。
一个中文字体必须涵盖数千个字。一个支持常用繁体或简体中文的字体有 6,000 到 20,000 个字形，而做成 WOFF2 通常是 3 到 15 MB——而且那只是一个字重。日文和韩文相当。
那是一百倍的体积，而且它不是任何人能修好的压缩问题：那个字体里面真的就有那么多张不同的图。把它当成普通网页字体出货，意味着访客要下载好几 MB 文字才正确显示，这在手机连接上是不能接受的。
有三种真实的做法：
子集化（Subsetting）。做一个只含该页面实际用到的字的字体文件。对一个固定的页面——一个落地页、一个书封、一组标题——这效果极好，可以把 10 MB 变成 30 KB。它对任何内容会变的东西都失效，因为一个不在子集里的字会退回另一个字体，而且看起来明显不对。
unicode-range 切分。字体被照字符范围切成许多小文件，浏览器只下载含有该页面出现之字符的那几块。大型 CJK 网页字体服务就是这样运作的，而且这是唯一能处理任意内容的做法。它仍然意味着数十个请求和几百 KB。
系统字体。用读者设备上已经有的字体。什么都不用下载、文字立刻显示，而排版就是那台设备有的样子。对中文正文来说，这往往是诚实的选择——一个自定义 CJK 字体的性能代价是真的，而在手机上视觉收获很小。
一个常见的折衷：标题用子集化的自定义字体（字集小而且是已知的），正文用系统字体。
在页面出现和字体抵达之间，浏览器得显示点什么，而那两种可能的行为都有名字：
你用样式表里的 font-display 在两者之间选择。swap 给你 FOUT，而那是正文的正确默认——“立刻读得到”胜过“最后才漂亮”。optional 更进一步：只有当字体几乎立刻抵达时浏览器才用它，否则这一次访问就维持后备字体，完全消除了跳动。
跳动本身可以靠挑一个比例接近真正字体的后备字体来减轻，这样换字时重排的文字比较少。
传统字体家族每个字重和样式各出一个文件——常规、粗体、斜体、粗斜体、细、半粗。六个文件，六次下载。
一个可变字体把整个范围放在一个文件里，字重是一条连续的轴。它比任何单一字重大，但比它们全部加起来小得多，所以一旦你需要三个以上字重它就赢了。有些还把宽度、倾斜或光学尺寸当成额外的轴。
这一点有真实的后果，而且被广泛忽略。
桌面字体授权通常不允许网页嵌入。你买的那个字体、或者设计软件附的那个，授权的是“在你机器上制作文档”——不是“被提供给一个网站的每一个访客”。网页使用是另一份授权，常常按页面浏览量计价。
把一个桌面 TTF 转成 WOFF2 然后上传，技术上微不足道，而在多数情况下是违反授权的。开源字体家族数量庞大，涵盖大部分需求，包括好几套不错的 CJK 家族；那是直截了当的答案。
同样的区分适用于把字体嵌进一本发行的 EPUB，那同样是散布而不是个人使用。
PDF 里的字体问题看起来类似，但成因不同。PDF 把字体嵌在文档里面，所以它是自足的；当一份 PDF 的字体变了，那是因为它们没有被嵌入，阅读器拿别的字体代换了。
网页字体从来不是嵌在页面里——它是一个通过网络抓取的独立文件，而且它可能因为 PDF 从不会面对的理由而没抵达：一个被挡掉的请求、一条慢速连接、一份样式表指名了一个不存在的文件。
font-display: swap 立刻显示读得到的文字，而不是一片空白