UD5工具箱
字体格式相关术语
TTF（TrueType Font）：TrueType 是由 Apple 和 Microsoft 在 1980 年代联合开发的字体格式。TTF 文件使用二次贝塞尔曲线来描述字形轮廓，具有良好的跨平台兼容性。在 Web 开发中，TTF 格式的字体文件通常体积较大，但兼容性最好，几乎所有浏览器和操作系统都支持 TTF 格式的字体。TTF 字体文件的扩展名为 .ttf。
OTF（OpenType Font）：OpenType 是在 TrueType 基础上发展而来的字体格式，由 Adobe 和 Microsoft 联合开发。OTF 文件可以使用二次贝塞尔曲线（与 TTF 相同）或三次贝塞尔曲线来描述字形轮廓。OTF 格式支持更多的排版特性，如连字、替代字形、小型大写字母等。OTF 字体文件的扩展名为 .otf，在现代浏览器中具有良好的支持。
WOFF（Web Open Font Format）：WOFF 是专为 Web 使用而设计的字体格式，本质上是 TTF 或 OTF 字体的压缩包装。WOFF 使用 zlib 压缩算法对字体数据进行压缩，通常可以将文件体积减小 30% 到 50%。WOFF 格式还允许在字体文件中嵌入元数据和许可证信息。WOFF 字体文件的扩展名为 .woff。目前所有现代浏览器都支持 WOFF 格式。
WOFF2（Web Open Font Format 2）：WOFF2 是 WOFF 的升级版本，使用 Brotli 压缩算法替代了 WOFF 中的 zlib 压缩。Brotli 算法的压缩效率比 zlib 高约 30%，因此 WOFF2 格式的字体文件通常比 WOFF 格式小 30% 左右。WOFF2 字体文件的扩展名为 .woff2。目前所有现代浏览器都支持 WOFF2 格式，是 Web 字体的首选格式。
字体子集化相关术语
字体子集化（Font Subsetting）：字体子集化是指从完整的字体文件中提取出仅包含所需字符的子集，并生成一个新的、更小的字体文件的过程。子集化可以显著减小字体文件的体积，特别是对于包含大量字符的中文字体来说，效果尤为明显。常见的子集化工具包括 pyftsubset、FontSquirrel 的字体生成器、Fonttools 等。
字符集（Character Set）：字符集是指字体子集化过程中需要保留的字符的集合。字符集的确定通常基于项目实际使用的文字内容。例如，如果一个网站只使用了 2000 个不同的汉字，那么字符集就应该是这 2000 个汉字加上可能用到的标点符号、数字和拉丁字母。字符集越精确，子集化后的字体文件就越小。
Unicode 区块（Unicode Block）：Unicode 标准将不同的字符分组到不同的区块中。例如，"基本拉丁文"区块包含 ASCII 字符，"中日韩统一表意文字"区块包含常用的汉字。在进行字体子集化时，可以按照 Unicode 区块来选择需要保留的字符范围，这是一种快速确定字符集的方法。
字形（Glyph）：字形是指字体中一个字符的视觉表现形式。一个字符可能对应一个或多个字形。例如，拉丁字母 "A" 通常只有一个字形，但某些中文字可能有简体和繁体两种字形。在字体子集化过程中，保留一个字符意味着保留该字符对应的所有字形数据。
Web 字体加载相关术语
FOIT（Flash of Invisible Text）：FOIT 是指在 Web 字体加载完成之前，页面上的文字暂时不可见的现象。这通常发生在使用 CSS @font-face 规则加载 Web 字体时。在字体加载期间，浏览器会使用后备字体或直接隐藏文字，直到 Web 字体加载完成。FOIT 会影响用户体验，特别是当字体文件较大或网络较慢时。
FOUT（Flash of Unstyled Text）：FOUT 是指在 Web 字体加载完成之前，页面先使用后备字体显示文字，然后在 Web 字体加载完成后突然切换到 Web 字体的现象。与 FOIT 不同，FOUT 至少保证了文字的可见性，但字体的突然切换可能会让用户感到视觉上的跳跃。
font-display：font-display 是 CSS @font-face 规则中的一个描述符，用于控制浏览器在字体加载期间如何显示文字。常见的取值包括 auto（浏览器默认行为）、block（隐藏文字直到字体加载完成）、swap（立即使用后备字体显示，字体加载完成后切换）、fallback（在短时间内隐藏文字，如果字体未加载完成则使用后备字体）和 optional（将字体视为可选，如果字体未能快速加载则不再尝试）。
预加载（Preload）：预加载是指通过 HTML link 标签的 rel="preload" 属性告诉浏览器提前加载某个资源。对于 Web 字体来说，预加载可以确保字体文件在页面解析过程中尽早开始加载，减少 FOIT 或 FOUT 的持续时间。预加载的语法示例为 link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin。
性能优化相关术语
关键渲染路径（Critical Rendering Path）：关键渲染路径是指浏览器将 HTML、CSS 和 JavaScript 转换为像素的步骤序列。在这个过程中，Web 字体的加载是一个重要的环节。如果字体文件阻塞了渲染，就会延长关键渲染路径，影响页面的首屏显示时间。通过字体子集化和合理的字体加载策略，可以缩短关键渲染路径，提升页面性能。
首次内容绘制（First Contentful Paint，FCP）：FCP 是一个重要的性能指标，表示浏览器首次渲染出任何 DOM 内容的时间点。Web 字体的加载速度直接影响 FCP 的数值。如果页面使用了 Web 字体，但字体文件尚未加载完成，浏览器可能会延迟文字的渲染，导致 FCP 延迟。字体子集化通过减小字体文件体积来加速字体加载，从而改善 FCP 指标。
最大内容绘制（Largest Contentful Paint，LCP）：LCP 是另一个重要的性能指标，表示页面中最大可见内容元素的渲染时间。对于以文字内容为主的页面来说，最大的内容元素通常是文本块，而文本块的渲染需要等待 Web 字体加载完成。因此，Web 字体的加载速度同样直接影响 LCP 的数值。