UD5工具箱
可变字体基础术语
在学习和使用可变字体技术的过程中，理解相关术语和概念是非常重要的。本节将详细解释可变字体领域中的核心术语，帮助你建立扎实的知识基础。
可变字体（Variable Font）
可变字体是一种OpenType字体格式扩展，它允许在一个字体文件中包含多个设计变体。传统的静态字体为每种样式（如Regular、Bold、Italic）提供一个独立的字体文件，而可变字体通过数学插值技术，在一个文件中存储从一个设计极端到另一个设计极端的连续变化。这意味着一个可变字体文件可以替代多个静态字体文件，大幅减少网络请求数量和总文件大小。可变字体于2016年在OpenType 1.8规范中被引入，目前已获得所有主流现代浏览器的支持。
设计空间（Design Space）
设计空间是可变字体中所有可变轴的组合所形成的多维空间。每个轴代表字体的一种可调节属性，轴的取值范围构成了该轴的维度。例如，一款只包含wght轴的可变字体拥有一维设计空间，其范围从最细值到最粗值。如果字体同时包含wght和wdth两个轴，则拥有二维设计空间。设计空间的维度越多，字体的变体可能性就越大。设计空间中的每个点都对应一种独特的字体样式，通过指定各轴的坐标值即可定位到设计空间中的某个具体样式。
注册轴（Registered Axis）
注册轴是由W3C和OpenType规范预定义的标准轴，具有明确的语义和推荐取值范围。目前已注册的轴包括：wght（字重，weight）、wdth（宽度，width）、slnt（倾斜，slant）、ital（斜体，italic）和opsz（光学尺寸，optical size）。注册轴的特点是所有支持可变字体的浏览器都认识这些轴，并且在CSS中有对应的简写属性。例如，wght轴可以使用font-weight属性来设置，wdth轴可以使用font-width属性来设置。使用注册轴可以确保字体在不同浏览器和平台上的行为一致性。
自定义轴（Custom Axis）
自定义轴是字体开发者自行定义的可变轴，不属于W3C预定义的注册轴。自定义轴的tag由四个小写字母组成（如"abcd"、"xyzz"等），用于标识字体开发者自定义的视觉属性。自定义轴不受规范约束，其语义和取值范围完全由字体开发者决定。例如，一款手写字体可能定义一个自定义轴来控制笔画的粗糙程度，或者一款装饰字体可能定义一个自定义轴来控制装饰元素的密度。自定义轴为字体设计提供了极大的灵活性，但需要注意的是，自定义轴在不同字体之间没有通用含义，使用时需要参考字体文档。
字重轴（wght）
wght轴是最常用的可变轴之一，用于控制文字的粗细程度。其推荐取值范围为100到900，其中100代表最细（Thin），200代表超细（ExtraLight），300代表细体（Light），400代表常规（Regular），500代表中等（Medium），600代表半粗（SemiBold），700代表粗体（Bold），800代表超粗（ExtraBold），900代表最粗（Black）。在CSS中，wght轴可以通过font-weight属性直接设置，也可以通过font-variation-settings属性设置。使用font-weight属性更为简洁，但font-variation-settings属性允许更精确的数值控制。
宽度轴（wdth）
wdth轴用于控制字符的水平宽度。其推荐取值范围以百分比形式表示，通常从75（最窄）到125（最宽），100代表标准宽度。当wdth值小于100时，字符会被水平压缩，显得更窄；当值大于100时，字符会被水平拉伸，显得更宽。宽度轴在响应式设计中特别有用——在窄屏设备上可以使用较小的wdth值来增加每行的字符数量，在宽屏设备上可以使用较大的wdth值来获得更舒适的阅读体验。在CSS中，wdth轴可以通过font-width属性设置。
倾斜轴（slnt）
slnt轴用于控制文字的倾斜角度。与ital轴不同，slnt轴控制的是机械倾斜（通过shear变换实现），而非真正的斜体设计。其推荐取值范围为-12到0度，其中0度代表正直，负值代表向右倾斜。slnt轴常用于需要轻微倾斜效果的场景，如引文块或强调文本。在CSS中，slnt轴可以通过font-style: oblique角度值来设置，也可以通过font-variation-settings属性设置。
斜体轴（ital）
ital轴用于控制斜体样式的变化。与slnt轴的机械倾斜不同，ital轴控制的是真正的斜体设计——字形会根据斜体设计规范进行重新绘制，通常包含更多的手写感和连笔效果。ital轴通常只有两个值：0代表正体（Upright），1代表斜体（Italic）。在某些字体中，ital轴可能包含更多的中间值，允许在正体和斜体之间进行平滑过渡。在CSS中，ital轴可以通过font-style: italic属性设置。
光学尺寸轴（opsz）
opsz轴用于根据文字的显示大小自动调整字形细节。在小字号下，字体需要更粗的笔画和更大的x高度来保持可读性；在大字号下，字体可以使用更细的笔画和更精致的细节来展现设计美感。opsz轴使得字体能够在不同字号下都保持最佳的视觉效果。其推荐取值范围以"点"（point）为单位，通常从8到144。在CSS中，opsz轴可以通过font-optical-sizing属性设置为auto来启用自动调整，也可以通过font-variation-settings属性手动设置。
字体变体设置（font-variation-settings）
font-variation-settings是CSS属性，用于直接设置可变字体的轴参数。它接受一个或多个用逗号分隔的轴tag和值对，格式为"tag value"。例如：font-variation-settings: "wght" 500, "wdth" 100, "slnt" -5。这个属性提供了最精确的控制方式，适用于自定义轴或需要非标准值的场景。需要注意的是，当使用font-variation-settings属性时，它会覆盖通过标准CSS属性（如font-weight、font-style等）设置的对应轴值。因此，建议只在标准属性无法满足需求时才使用font-variation-settings。
字体显示行为（font-display）
font-display是CSS属性，用于定义字体在加载过程中的显示策略。它决定了当自定义字体尚未下载完成时，浏览器应该如何处理文本的显示。常见的值包括auto（浏览器默认策略）、block（短暂隐藏后替换为备用字体）、swap（立即显示备用字体，字体加载完成后切换）、fallback（介于block和swap之间）和optional（如果字体未立即可用则使用备用字体且不重试）。对于可变字体，由于文件通常较大，合理设置font-display对于优化用户感知加载速度非常重要。
OpenType字体格式
OpenType是一种跨平台的字体文件格式，由Microsoft和Adobe联合开发。它建立在TrueType字体格式的基础上，增加了对高级排版特性的支持，包括连字、小型大写字母、旧式数字、上下标等。可变字体技术是OpenType规范的扩展，定义在OpenType 1.8及更高版本中。OpenType字体文件使用.ttf或.otf作为文件扩展名。在Web环境中，WOFF2格式的OpenType字体是最常用的选择，因为它提供了最佳的压缩率和浏览器兼容性。
WOFF2格式
WOFF2（Web Open Font Format 2）是专为Web优化的字体格式，基于Brotli压缩算法。与WOFF1相比，WOFF2通常能提供30%左右的额外压缩率，使得字体文件在网络传输中更加高效。WOFF2是目前Web字体的最佳格式选择，所有现代浏览器都支持WOFF2格式。当使用可变字体时，WOFF2格式的优势更加明显，因为可变字体文件通常比静态字体大得多，良好的压缩可以显著减少加载时间。
字体加载策略
字体加载策略是指在Web页面中加载自定义字体的方法和最佳实践。常见的策略包括：预加载关键字体文件（使用link rel="preload"）、使用font-display属性控制加载行为、提供系统字体作为备用方案、使用服务端字体子集化减少文件大小等。对于可变字体，还需要考虑轴的使用策略——是否需要加载所有轴的数据，还是只加载项目中实际使用的轴。合理的字体加载策略可以在保证视觉效果的同时最大化页面加载性能。