CSS 字体模块第 4 级

1. 简介

本规范包含并扩展了 CSS3 字体规范（[CSS-FONTS-3]）中描述的基本字体特性。

1.1. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，并使用 [CSS-VALUES-3] 中的值定义语法。本规范中未定义的值类型在 CSS 值与单位 [CSS-VALUES-3] 中定义。与其他 CSS 模块组合可能会扩展这些值类型的定义。

除了定义中列出的属性特定值外，本规范中定义的所有属性也都接受 CSS 全局关键字作为其属性值。为了可读性，未明确重复列出。

2. 基本字体属性

用于呈现字符的特定字形由字体族以及应用于给定元素的其他字体属性确定。此结构允许独立调整各项设置。

2.1. 字体族：font-family 属性

名称	font-family
值	[ <font-family-name> \| <generic-font-family> ]#
初始值	取决于用户代理
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	列表，每项为一个字符串和/或 <generic-font-family> 关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性指定了字体族名称或通用族名称的优先级列表。字体族定义了一组在字重、宽度或倾斜度上有所不同的字形。CSS 使用字体族名称与其他字体属性的组合来选择单个字形。使用这种选择机制，而不是像设计应用程序中通常那样通过样式名称选择字形，可以在发生回退时使文本显示具有一定程度的规则性。

组件值是一个逗号分隔的列表，表示备选方案。用户代理遍历族名称列表，直到匹配到一个可用的字体，该字体包含要呈现字符的字形。（参见 § 5.3 簇匹配。）这允许跨平台可用字体的差异以及各个字体支持的字符范围的差异。

body {
  font-family: Helvetica, Verdana, sans-serif;
}

如果 Helvetica 可用，它将在渲染时使用。如果 Helvetica 和 Verdana 都不存在，则将使用通用字体族 sans-serif 字体。

有三种类型的字体族名称，其中两种可用于此属性

<font-family-name>

字体族名称，例如上一个示例中的 Helvetica 或 Verdana。

这可能是本地安装的字体，也可能是 Web 字体。

<generic-font-family>

每个 <generic-font-family> 关键字代表一种通用的字体选择，并作为属于指定通用字体类别的本地安装字体的一个或多个字体的潜在别名。因此，当作者更具体的字体选择不可用时，可以使用 <generic-font-family> 作为回退。

通用族有三种类型

适用于所有 Unicode 字符且总是会匹配本地安装字体的通用字体。例如，monospace。
适用于所有 Unicode 字符但某些系统上可能不匹配本地安装字体的通用字体。例如，ui-rounded。
特定于书写系统，仅适用于 Unicode 字符子集，且某些系统上可能不匹配本地安装字体的通用字体。例如，generic(fangsong)。

鼓励作者将通用字体族作为最后一个备选方案以提高鲁棒性，并在适用时使用更具体的通用字体族，即使个人命名的字体族不可用，也能偏好某种特定样式。

请注意，<generic-font-family> 关键字不能加引号（否则它们会被解释为 <font-family-name>）。

通用族关键字集定义在 § 2.1.5 通用字体族中。

<system-font-family-name>

本地安装的系统字体，其使用受某些约束限制。特别是，它不能与 font-family 属性一起使用，但可以与 font 复合属性一起使用。

以下值指代系统字体

标题 (caption): 用于带标题控件（如按钮、下拉菜单等）的字体。
icon: 用于标记图标的字体。
menu: 菜单中使用的字体（如下拉菜单和菜单列表）。
message-box: 对话框中使用的字体。
small-caption: 用于标记小型控件的字体。
status-bar: 窗口状态栏中使用的字体。

测试

system-fonts-serialization.tentative.html (在线测试) (源码)

2.1.1. <font-family-name> 的语法

<font-family-name> = <string> | <custom-ident>+

除通用族或系统字体族之外的字体族名称必须用引号括起来作为 <string>，或者不带引号作为由一个或多个 <custom-ident> 组成的序列。

注意：这意味着大多数标点符号和出现在每个标记开头的数字在不带引号的字体族名称中必须转义。

为了说明这一点，以下声明无效

font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

不允许任何可能被误解为 font-family 值定义中的预定义关键字，或 CSS 全局关键字的标识符。

注意：这意味着，如果您确实有一个名称与 <generic-font-family> 名称、系统字体名称或 CSS 全局关键字相同的字体，则它必须加引号。

为了说明这一点，以下不寻常的字体族名称是有效的，因为它们已加引号

font-family: "sans-serif", sans-serif;
font-family: "default", sans-serif;
font-family: "initial", sans-serif;
font-family: "inherit", sans-serif;

如果标识符序列作为 <font-family-name> 提供，则计算值为通过用单空格连接序列中的所有标识符将名称转换为字符串。

为避免转义错误，建议为包含空格、数字或除连字符外的标点符号的字体族名称加引号

给字体族加引号可以防止转义错误。

body { font-family: "New Century Schoolbook", serif }

<body style="font-family: '21st Century', fantasy">

碰巧与 font-family 关键字值相同的字体族名称（例如 CSS 全局关键字（如 inherit），或 <generic-font-family> 关键字（如 serif））必须加引号，以防止与相同名称的关键字混淆。UA 不得将这些关键字视为匹配 <font-family-name> 类型。

2.1.2. <generic-font-family> 的语法

<generic-font-family> = <generic-font-script-specific>| <generic-font-complete> | <generic-font-incomplete>
<generic-font-script-specific> = generic(fangsong) | generic(kai) | generic(khmer-mul) |  generic(nastaliq)
<generic-font-complete> = serif | sans-serif | system-ui | cursive | fantasy | math | monospace
<generic-font-incomplete> = ui-serif | ui-sans-serif | ui-monospace | ui-rounded

为了使语法不太容易产生冲突，最近定义的通用字体族使用函数式语法来识别。

body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif}

此示例中的第一个选择是特定的、命名的字体，采用仿宋 (Fang Song) 样式。族名称用引号括起来，因为它包含空格字符。第二个是最近添加的脚本特定通用字体；它是 unicode 范围特定的，因此在某些系统上可能不匹配实际安装的字体；但如果它存在，它将是请求样式的示例。第三个是通用字体，保证在所有系统上都能匹配。

2.1.3. <system-font-family-name> 的语法

<system-font-family-name> = caption | icon | menu | message-box | small-caption | status-bar

2.1.4. 字形与字体族之间的关系

字体族名称仅指定赋予一组字形的名称；它不指定单个字形。

例如，鉴于下面字体的可用性，Futura 将匹配，但 Futura Medium 将不匹配

注意：用于选择的 CSS 字体属性定义明确不旨在定义字体分类学。字体设计师的族概念通常可以扩展到沿除字重（font-weight）、宽度（font-width）和倾斜（font-style）的标准轴之外的轴变化的字形集合。一个族可以沿着该族特有的轴变化。CSS 字体选择机制仅提供了一种在需要替换时确定“最接近”匹配的方法。

注意：一组字体被分组为字体族的精确方式因平台字体管理 API 而异。例如，Windows GDI API 只允许将四个字形分组为一个族，而 DirectWrite API、Core Text API 和其他平台支持具有多种字重、宽度和倾斜度的字体族（有关详细信息，请参阅附录 A：将平台字体属性映射到 CSS 属性）。

有关如何匹配 font-family 名称的信息，请参阅下方的 § 5.1 本地化名称匹配。

2.1.5. 通用字体族

通用字体族是具有标准名称（由 CSS 定义）但作为系统上存在的现有已安装字体族的别名的字体族。然而，单个通用字体族可能是复合字形，它基于字符的 Unicode 范围、包含元素的内容语言、用户偏好、系统设置等组合不同的字体。不同的通用字体族可能映射到相同的所用字体。

测试

注意：通用字体族旨在在许多平台上得到广泛实现，这与通常是特定平台名称的任意 <font-family-name> 不同。它们预计会在不同平台上映射到不同的字体。如果作者希望其文本在许多平台上遵循特定的设计，并且不关心在这些平台上选择哪种特定字体，则可以指定这些通用族名称。

用户代理应为通用字体族提供合理的默认选择，在底层技术允许的限制内，尽可能表达每个族的特征。鼓励用户代理允许用户为通用字体族选择替代字形。

serif

衬线 (Serif) 字体表示具有修饰笔画、喇叭口或尖细末端，或具有实际衬线结尾（包括板状衬线）的字形。衬线字体通常按比例间隔。与来自 sans-serif 通用字体族的字体相比，它们通常显示出粗笔画和细笔画之间更大的变化。

注意： serif 和 sans-serif 仅适用于少数书写脚本。它们作为 CSS 中通用字体族的使用是历史性的，反映了早期 Web 开发以拉丁文为中心的性质。更好且应用范围更广的名称本可以是例如“调制”和“单线”。然而，出于 Web 兼容性的原因，这些名称无法更改。

CSS 使用术语“serif”来应用于任何脚本的字体，尽管对于特定脚本，其他名称可能更熟悉，例如 Mincho（日文）、Sung 或 Song（中文）、Batang（韩文）。对于阿拉伯文，Naskh 样式将对应于 serif。

serif 必须始终映射到至少一个匹配的字体字形。

注意：对该字体字形的字符覆盖范围不作保证。因此，serif 映射到的字体最终可能不会用于所有内容。

sans-serif

正如 CSS 中所使用的术语，无衬线 (sans-serif) 字体中的字形通常对比度较低（垂直和水平茎的粗细接近），并且具有平淡的笔画末端（没有任何喇叭口、交叉笔画或其他装饰）。无衬线字体通常按比例间隔。与来自 serif 族的字体相比，它们在粗细笔画之间的变化通常很少。CSS 使用术语“sans-serif”来应用于任何脚本的字体，尽管对于特定脚本，其他名称可能更熟悉，例如 Gothic（日文）、Hei（中文）或 Gulim（韩文）。

sans-serif 必须始终映射到至少一个匹配的字体字形。

注意：对该字体字形的字符覆盖范围不作保证。因此，sans-serif 映射到的字体最终可能不会用于所有内容。

cursive

草书 (cursive) 字体中的字形通常使用脚本样式，结果看起来更像手写笔或画笔书写，而不是印刷字体。CSS 使用术语“cursive”来应用于任何脚本的字体，尽管 Chancery、Brush、Swing 和 Script 等其他名称也用于字体名称中。

fantasy

幻想 (fantasy) 字体主要是装饰性或表现性字体，包含字符的装饰性或表现性表示。这不包括不表示实际字符的 Pi 或图片字体。

monospace

等宽字体 (monospace) 的唯一标准是所有字形具有相同的固定宽度。这通常用于呈现计算机代码样本。

monospace 必须始终映射到至少一个匹配的字体字形。

注意：对该字体字形的字符覆盖范围不作保证。因此，monospace 映射到的字体最终可能不会用于所有内容。

system-ui

此通用字体族允许文本以 UA 运行平台上的默认用户界面字体（与所有 § 2.1.5 通用字体族一样，可能是复合字体）进行呈现。跨平台 UA 应在其支持的不同平台上使用不同的字体。 system-ui 的目的是允许 Web 内容与原生操作系统的外观和感觉集成。这对于混合、Web 或跨平台应用程序非常有用。

测试

使用的精确字体将取决于平台支持、平台语言、区域设置、用户偏好、Unicode 覆盖范围和内容语言等因素。当使用 system-ui 时，UA 可以选择使用平台提供的文本渲染引擎，以便更紧密地匹配默认用户界面的外观。

与其他通用字体族一样，将特定已安装字体替换为 system-ui 不会影响计算样式。

<div id="system-text" style="font-family: system-ui"></div>
...
window.getComputedStyle(document.getElementById("system-text")).getPropertyValue("font-family");

上面的脚本不应了解 system-ui 如何扩展为包含一系列系统用户界面字体。特别是，上面的脚本在每个平台上都应产生“system-ui”的结果。

注意： system-ui 高度依赖于平台环境，因为多个因素可能会影响默认用户界面字体，并且可能具有不同水平的文本渲染支持。这可能会导致显示的字体对于某些最终用户来说是不理想的（例如，简体中文用户在旧版本的 Windows 上可能会获得等宽衬线字体；lang 属性可能不会影响显示的字体，例如在俄语区域设置中的 lang="uk" 或中文区域设置中的 lang="ja"）。某些操作系统供应商不提供自定义 system-ui 的方式，这与通常允许用户自定义通用 sans-serif 或 serif 字体族的 UA 不同。顾名思义，system-ui 旨在用于 Web 应用程序中的 UI 元素，而不是用于大段文本或文章。

math

此字体族旨在用于数学表达式。

此类字体可能包含额外的数据（例如，OpenType MATH 表）以帮助公式布局的层次结构过程。特别是，它们可能包含有助于设置数学公式的风格和拉伸字形变体。

generic(fangsong)

此字体族用于中文的仿宋 (Fang Song) 字体。仿宋是一种介于宋体 (serif) 和楷体 (generic(kai)) 之间的轻松、过渡形式。通常，与宋体样式相比，水平线是倾斜的，端点花饰较小，笔画宽度变化较小。仿宋通常用于中国政府的正式文件。

注意： generic(fangsong) 可能不会映射到任何本地安装的字体，但如果映射了，该字体将是仿宋样式。

用仿宋字体示例显示的中文文本

generic(kai)

此字体族用于简体和繁体中文。一种主要的字体，为中文文本提供书法样式。它表现出显著的手写特征。楷体常用于正式文件和教科书。台湾的大多数正式文件在全文中使用楷体。楷体也可以与其他字体结合使用，用于需要与其余内容区分开来的文本，例如标题、参考资料、引用和对话。

注意： generic(kai) 可能不会映射到任何本地安装的字体，但如果映射了，该字体将是楷体样式。

用楷体字体示例显示的中文文本

generic(khmer-mul)

此字体族用于高棉语（柬埔寨使用），用于标题和题头，或强调重要的名称或名词。与用于常规文本的直立 (âksâr chôr) 样式相比，âksâr mul 的特点是更重、更圆的字母形状，并且可能包含更多的连字形式。

尽管视觉上样式更重，但 generic(khmer-mul) 中常规文本的字体字重保持不变 (400)。

注意： generic(khmer-mul) 可能不会映射到任何本地安装的字体，但如果映射了，该字体将是 âksâr mul 样式。

柬埔寨文本显示为：（顶部）âksâr chôr 样式，使用 Khmer OS Battambang；（中间）âksâr mul 样式，使用 Khmer OS Moul v6，无连字；（底部）âksâr mul 样式，使用 Khmer OS Moul v4，有两个连字。所有字体均由 Dan Hong 设计。

generic(nastaliq)

此字体族是书写乌尔都语和克什米尔语的标准方式，也通常是波斯语和其他语言文本的首选样式，特别是在诗歌等文学体裁中。关键特性包括连接字母的倾斜基线，以及整体上对于基本字母和变音符号的复杂成型和定位。许多字形和连字也有独特的形状。对于乌尔都语和克什米尔语等语言，不要回退到 naskh 样式很重要。

注意： generic(nastaliq) 可能不会映射到任何本地安装的字体，但如果映射了，该字体将是 Nastaliq 样式。

السلام علیکم — 用示例 nastaliq 字体（Noto Nastaliq Urdu）显示的乌尔都语文本

ui-serif

此字体族用于系统用户界面的衬线变体。ui-serif 的目的是允许 Web 内容与原生操作系统的外观和感觉集成。

注意：在没有合适系统字体的平台上，不期望 ui-serif 映射到任何字体。

注意：请参阅关于 system-ui 的说明以了解潜在问题。

sample ui-serif font — macOS Catalina 和 iOS 13 上的 ui-serif 字体示例：New York

ui-sans-serif

此字体族用于系统用户界面的无衬线变体。ui-sans-serif 的目的是允许 Web 内容与原生操作系统的外观和感觉集成。

注意：在没有合适系统字体的平台上，不期望 ui-sans-serif 映射到任何字体。

注意：请参阅关于 system-ui 的说明以了解潜在问题。

sample ui-sans-serif font — macOS Catalina 和 iOS 13 上的 ui-sans-serif 字体示例：San Francisco

ui-monospace

此字体族用于系统用户界面的等宽变体。ui-monospace 的目的是让 Web 内容与原生操作系统的外观和风格融为一体。

注意：在没有合适系统字体的平台上，ui-monospace 不会被映射到任何字体。

注意：有关潜在问题，请参阅关于 system-ui 的说明。

sample ui-monospace font — macOS Catalina 和 iOS 13 上的 ui-monospace 字体示例：SF Mono

ui-rounded

此字体族用于系统用户界面的圆体变体。ui-rounded 的目的是让 Web 内容与原生操作系统的外观和风格融为一体。

注意：在没有合适系统字体的平台上，ui-rounded 不会被映射到任何字体。

注意：有关潜在问题，请参阅关于 system-ui 的说明。

sample ui-rounded font — macOS Catalina 和 iOS 13 上的 ui-rounded 字体示例：SF Rounded

2.2. 字体字重：font-weight 属性

名称	font-weight
值	<font-weight-absolute> \| bolder \| lighter
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	一个数值，详见下文
规范顺序	按语法
动画类型	按计算值类型

测试

font-weight 属性指定字体字形的粗细，即其黑度程度或笔画厚度。

此属性接受以下值

<font-weight-absolute> = [ normal | bold | <number [1,1000]> ]

值的含义如下：

<number [1,1000]>

每个数值表示一个至少与其前一个数值一样粗的字重。只有大于或等于 1 且小于或等于 1000 的值才有效，所有其他值均为无效。数值通常对应于下文中常用的字重名称。

100 - Thin (极细)
200 - Extra Light (Ultra Light) (特细)
300 - Light (细)
400 - Normal (常规)
500 - Medium (中等)
600 - Semi Bold (Demi Bold) (半粗)
700 - Bold (粗)
800 - Extra Bold (Ultra Bold) (特粗)
900 - Black (Heavy) (极粗)

注意：字体内部可能提供其自己的字重名称映射，但这些字体内部的映射在 CSS 中会被忽略。

normal

与 400 相同。

bold

与 700 相同。

bolder

指定比继承值更粗的字重。请参阅 § 2.2.1 相对字重。

lighter

指定比继承值更细的字重。请参阅 § 2.2.1 相对字重。

使用非九级字重等级的字体格式应将其等级映射到 CSS 等级，使得 400 大致对应于标记为 Regular、Book、Roman 的字面，而 700 大致对应于标记为 Bold 的字面。或者，字重也可以从大致对应于上述等级的样式名称中推断出来。该等级是相对的，因此字重值较大的字面绝不能看起来更细。如果使用样式名称来推断字重，则应注意处理不同语言环境下样式名称的变化。

2.2.1. 相对字重

bolder 和 lighter 的指定值表示相对于父元素字重的字重。计算后的字重根据继承的 font-weight 值，使用下表计算得出。

继承值 (`w`)	bolder	lighter
`w` < 100	400	无变化
100 ≤ `w` < 350	400	100
350 ≤ `w` < 550	700	100
550 ≤ `w` < 750	900	400
750 ≤ `w` < 900	900	700
900 ≤ `w`	无变化	700

注意：上表等同于在包含常规和粗体字面以及极细和极粗字面的字体族中，选择下一个相对更粗或更细的字面。希望对特定元素所用确切字重值进行更精细控制的作者可以使用数值，而不是相对字重。

2.2.2. 缺失字重

通常，特定字体族只有少数几种字重可用。当指定的字重不存在相应的字面时，会使用相近字重的字面。通常，粗体字重映射到较粗的字面，细体字重映射到较细的字面。（精确定义请参阅 § 5 字体匹配算法。）

此处的示例说明了针对不同字重使用了哪种字面。灰色表示所需字重的字面不存在，因此使用了相近字重的字面。

weight mappings for a family with 400, 700 and 900 weights — 具有 400、700 和 900 字重字面的字体族的字重映射

weight mappings for a family with 300, 600 weights — 具有 300 和 600 字重字面的字体族的字重映射

大多数用户代理将字体建模为具有特定字重，这通常对应于上述九级字重等级中的一个数字。虽然大多数字体确实如此，但某些字体可能是可配置的，以支持一系列字重。在这种情况下，用户代理会使用字重尽可能接近所请求字重的字面（精确算法请参阅 § 5 字体匹配算法）。特别是，使用支持一系列字重的字体的用户代理，其行为应表现为在该范围内每个单独字重处都有一个字体存在。对于使用可变字体的 TrueType / OpenType 字体，使用 wght 变体来实现变化的字重。小数位字重是有效的。

虽然这种做法并不受字体设计师的喜爱，但用户代理通常会为缺乏实际粗体字面的字体族合成粗体字面。出于字体匹配的目的，这些字面必须被视为仿佛存在于该字体族中一样。作者可以使用 font-synthesis 属性显式避免此行为。

2.3. 字体宽度：font-width 属性

名称	font-width
值	normal \| <percentage [0,∞]> \| ultra-condensed \| extra-condensed \| condensed \| semi-condensed \| semi-expanded \| expanded \| extra-expanded \| ultra-expanded
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	未解析
计算值	一个百分比，详见下文
规范顺序	按语法
动画类型	按计算值类型

测试

font-width 属性从字体族中选择常规、压缩或扩展字面。值可以指定为百分比或关键字，这些关键字按如下表格映射到百分比

绝对关键字值	数值
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

<percentage [0,∞]> 值代表字形的宽度分数，100% 代表“常规”字形宽度（由字体设计师定义）。小于 0% 的值均为无效。

当给定宽度没有对应的字面时，小于 100% 的值会映射到更窄的字面（如果存在），否则映射到更宽的字面。相反，大于或等于 100% 的值会映射到更宽的字面（如果存在），否则映射到更窄的字面。某些字体可能支持一系列宽度值；如果所请求的宽度值在字体中不可用，则使用支持的最接近值，并遵循相同的映射规则（精确算法请参阅 § 5 字体匹配算法）。对于支持变体的 TrueType / OpenType 字体，使用 wdth 变体来实现变化的宽度。

下图显示了九种 font-width 属性设置如何影响包含多种离散宽度字体族的字体匹配。灰色表示不存在该宽度的字面，因此替换为其他宽度

width mappings for a family with condensed, normal and expanded faces — 具有压缩、常规和扩展宽度字面的字体族的宽度映射

getComputedStyle() 始终将其值序列化为 <percentage>，无论作者最初是如何指定该值的，也无论该关键字是否恰好映射到该值。

2.3.1. 字体宽度：font-stretch 旧称别名

由于历史原因，存在一个 font-stretch 属性，它是一个旧称别名，其功能与 font-width 完全相同。

例如，此处在一级标题上使用了旧称 font-stretch。

h1 {font-stretch: condensed; }

这些标题上指定的 font-width 值被设置为 condensed'。

例如，此处在一级标题上使用了 font-width。

h1 {font-width: condensed; }

这些标题上指定的 font-stretch 值被设置为 condensed。

测试

对于缺乏此类字面且没有宽度变化轴的字体族，用户代理不得合成压缩或扩展的字面。特别是，用户代理不得几何拉伸此类字面。

2.4. 字体样式：font-style 属性

名称	font-style
值	normal \| italic \| left \| right \| oblique <angle [-90deg,90deg]>?
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	所指定的关键字，如果指定了角度，则加上以度为单位的角度
规范顺序	按语法
动画类型	按计算值类型；normal 以 oblique 0deg 方式动画化

测试

font-style 属性允许选择斜体或伪斜体字面。斜体字形通常本质上是草书的，而伪斜体字面通常是常规字面的倾斜版本。

比较灰色中 Palatino "a" 和 Baskerville "N" 的人工倾斜渲染与实际的斜体版本

artificial sloping vs. real italics — 人工倾斜与真实斜体对比

值的含义如下：

normal: 匹配分类为常规字面的字体，即既不是斜体也不是伪斜体的字体。这表示倾斜度值为 "0"。
italic: 匹配标记为斜体字面的字体，或者如果不存在，则匹配伪斜体字面。其倾斜的角度和方向未指定。
left: 匹配标记为斜体字面且具有正（顺时针）倾斜的字体；或者，如果不存在，则匹配具有正倾斜的伪斜体字面。
right: 匹配标记为斜体字面且具有负（逆时针）倾斜的字体；或者，如果不存在，则匹配具有负倾斜的伪斜体字面。
oblique <angle [-90deg,90deg]>?: 控制对伪斜体字面的匹配。正角度表示顺时针倾斜；负角度表示逆时针倾斜。缺失 <angle> 表示 14deg。（注意，字体内部可能提供其对“伪斜体”的自己的映射，但字体内部的映射会被忽略。）接受小数位和负值；但是，小于 -90deg 或大于 90deg 的值均为无效。如果不存在伪斜体字面，且 font-synthesis-style 的值为 auto，则会生成合成伪斜体字面。

negative slant — 具有负倾斜的斜体字面。该字体为 Mf Autumn Breeze，作者为 Misti Hammers。

字体族可能不包含任何斜体或伪斜体字面，可能仅包含斜体字面而无伪斜体，可能仅包含伪斜体而无斜体，可能同时包含伪斜体和斜体，可能包含多种不同角度的伪斜体，或者包含上述各种组合。字体匹配例程将选择一个与所请求角度符号相同，且（如果存在多个此类字面）最接近所请求角度的字体。通常，对于大于或等于 11deg 的请求角度，偏好较大角度；否则，偏好较小角度。（请参阅 § 5 字体匹配算法。）对于使用变体的 TrueType / OpenType 字体，slnt 变体用于实现伪斜体值，而 ital 变体（值为 1）用于实现斜体值。

注意：OpenType slnt 轴定义的正角度表示逆时针倾斜，与 CSS 的方向相反。CSS 实现将在使用变体产生伪斜体字面时考虑到这一点。

在垂直书写模式下，正向和负向伪斜体应该向哪个方向倾斜？我们如何实现对向倾斜（垂直书写所需）？

如果没有可用的斜体或伪斜体字面，可以通过使用人工倾斜操作渲染非倾斜字面来合成伪斜体字面。这些人工倾斜字面的使用可以使用 font-synthesis 属性禁用。

注意：虽然可以通过人工倾斜常规字面的字形来模拟伪斜体字面，但这不等同于真正的伪斜体，后者在倾斜的同时能正确保留光学笔画厚度。使用真实的伪斜体字体总是比依赖合成版本更好。

出于字体匹配的目的，用户代理可以将 italic 视为 oblique 的同义词。对于将这些值视为不同的用户代理，不得对 italic 执行合成。

注意：作者还应意识到，合成方法可能不适用于像西里尔文这样斜体形式在形状上截然不同的文字。使用真实的斜体字体总是比依赖合成版本更好。

注意：许多文字缺乏在用常规字面渲染的文本中混合草书形式的传统。中日韩字体几乎总是缺乏斜体或伪斜体字面。支持多种文字混合的字体有时会从斜体字面支持的字形集中省略特定文字，例如阿拉伯文。在跨字体实现合成时，用户代理在进行字符映射假设时应非常小心，因为字体族中的斜体字面可能具有与罗马体字面不同的字符映射。

2.5. 字体大小：font-size 属性

名称	font-size
值	<absolute-size> \| <relative-size> \| <length-percentage [0,∞]> \| math
初始值	medium
应用于	所有元素和文本
可继承	是
百分比	参考父元素的字体大小
计算值	绝对长度
规范顺序	按语法
动画类型	按计算值类型

测试

此属性指示字体的字形的期望高度。对于可缩放字体，font-size 是应用于字体 EM 单位的缩放因子。对于不可缩放字体，font-size 转换为绝对单位并与声明的字体大小进行匹配，这两个匹配值均使用相同的绝对坐标空间。

注意：对于字形应如何适应其 EM 方框没有要求。当以相同的 font-size 渲染时，个别字体可能具有不同的表观视觉大小。此外，字形可能会渲染在超出其 EM 方框的任意距离处；如果它们溢出了其包含块，则可能导致墨迹溢出。

值的含义如下：

<absolute-size>

<absolute-size> 关键字指的是用户代理计算并保存的字体大小表中的一个条目。请参阅 § 2.5.1 绝对大小关键字映射表。

可能的值为

[ xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large ]

<relative-size>

<relative-size> 关键字相对于父元素的计算 font-size 以及可能的字体大小表进行解释。可能的值为

[ larger | smaller ]

如果父元素在绝对大小关键字映射表中具有关键字字体大小，则 larger 可能会将字体大小计算为表中的下一个条目，而 smaller 可能会将字体大小计算为表中的前一个条目。例如，如果父元素的字体大小为 font-size:medium，则指定 larger 的值可能会使子元素的字体大小变为 font-size:large。

除了使用先前关键字表中的下一个和前一个项目外，用户代理还可以使用简单的比率来相对于父元素增加或减小字体大小。具体比率未指定，但应在 1.2–1.5 左右。此比率在不同元素之间可能有所不同。

注意：视力受损的用户可能会要求用户代理使用高于默认值的比率，以辅助阅读。此外，当用户代理检测到段落文本与标题文本时，可能会选择使用不同的比率。

<length-percentage [0,∞]>

长度值指定绝对字体大小（独立于用户代理的字体表）。负长度值无效。

百分比值指定相对于父元素计算 font-size 的绝对字体大小。负百分比值无效。

注意：使用百分比值或字体相对长度（如 em 和 rem）会带来更稳健和可级联的样式表。

math

在确定 font-size 属性的计算值时，必须应用特殊的数学缩放规则。

以下样式表展示了指定字体大小的各种方式。

p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }

注意：此属性的使用值可能由于 font-size-adjust 而与其计算值不同。但是，子元素继承计算出的 font-size 值，该值不受 font-size-adjust 的影响（否则，font-size-adjust 的效果会复合）。

由于某些字体大小的不可用，此属性的实际值可能与其使用值不同。

font-size 可以被限制，用于响应式排版。

font-size: clamp(10px, ..., 36px);

2.5.1. 绝对大小关键字映射表

下表提供了用户代理关于绝对大小缩放因子及其与 HTML 标题和绝对字体大小映射的指导原则。medium 值被用作参考中间值。用户代理可以针对不同的字体或不同类型的显示设备微调这些值。

CSS 绝对大小值	xx-small	x-small	small (小号字体)	medium	large	x-large	xx-large	xxx-large
缩放因子	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML 标题	h6		h5	h4	h3	h2	h1
HTML `font` 大小	1		2	3	4	5	6	7

注意：在 CSS1 中，相邻索引之间的建议缩放因子为 1.5，用户体验证明这太大了。在 CSS2 中，电脑屏幕相邻索引之间的建议缩放因子为 1.2，这仍然给小尺寸带来问题。新的缩放因子在每个索引之间有所不同，以提供更好的可读性。

为了保持可读性，应用这些指导原则的用户代理仍应避免创建每 EM 单位小于 9 个设备像素的字体大小。

2.6. 相对大小调整：font-size-adjust 属性

名称	font-size-adjust
值	none \| <number [0,∞]>
初始值	none（无）
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	一个数字或关键字 none
规范顺序	按语法
动画类型	按计算值类型

测试

对于任何给定的字体大小，文本的表观大小和有效易读性因字体而异。对于区分大小写字母的拉丁文或西里尔文等双文制文字，小写字母相对于大写字母的相对高度是决定易读性的一个因素。这通常被称为纵横比值，等于字体的 x-高度除以字体大小。

注意：对于使用变音符号的文本，过大的 x-高度实际上会降低易读性，因为变音符号会变得局促。

在发生字体回退的情况下，回退字体可能与所需字体族不具有相同的纵横比值，因此易读性会降低。font-size-adjust 属性是在字体回退发生时保持文本易读性的一种方式。它通过调整字体大小来实现这一点，以便无论使用何种字体，x-高度都保持相同。

下面定义的样式将 Verdana 指定为所需字体族，但如果 Verdana 不可用，则将使用 Futura 或 Times。一个段落也指定了 font-size-adjust。

p {
  font-family: Verdana, Futura, Times;
}
p.adj {
  font-size-adjust: 0.545;
}

<p>Lorem ipsum dolor sit amet, ...</p>
<p class="adj">Lorem ipsum dolor sit amet, ...</p>

Verdana 具有相对较高的 0.545 的纵横比值，这意味着小写字母相对于大写字母而言相对较高，因此在小尺寸下文本看起来易读。Times 的纵横比值较低，为 0.447，因此如果发生回退，除非也指定了 font-size-adjust，否则文本在小尺寸下的易读性将不如 Verdana。

下面展示了在每种字体中渲染的文本如何比较，各列显示了以 Verdana、Futura 和 Times 渲染的文本。各行内的单元格使用了相同的字体大小值，并包含红色线条以显示 x-高度的差异。在上半部分，每一行都以相同的字体大小值进行渲染。下半部分也是如此，但在这半部分中，font-size-adjust 属性也被设置为 0.545，这样实际字体大小就会被调整，以保持每一行中 Verdana 的 x-高度。注意下半部分中较小的文本在每一行中是如何保持相对易读的。

text with and without 'font-size-adjust' — 使用和不使用 font-size-adjust 的文本

此属性允许作者为元素指定纵横比值，这将有效地保持首选字体的 x-高度，无论它是否被替换。值的含义如下

none（无）

不保持字体的 x-高度。

<number [0,∞]>

指定下文中用于计算调整后字体大小的纵横比值

c  =  ( a / a' ) s

其中

s  =  font-size value
a  =  aspect value as specified by the 'font-size-adjust' property
a' =  aspect value of actual font
c  =  adjusted font-size to use

负值是无效的。

此值适用于任何被选择的字体，但在典型使用中，它应基于字体族列表中第一个字体的纵横比值。如果此项指定准确，上述公式中的 (a/a') 项对于第一个字体实际上为 1，且不会发生调整。如果该值指定不准确，使用字体族列表中第一个字体渲染的文本将在不支持 font-size-adjust 的较旧用户代理中显示不同。

font-size-adjust 的值会影响 font-size 的使用值，但不会影响计算值。它会影响基于字体度量的相对单位（如 ex 和 ch）的大小，但不会影响 em 单位的大小。由于 line-height 的数值引用的是 font-size 的计算大小，因此 font-size-adjust 不会影响 line-height 的使用值。

注意：在 CSS 中，作者通常将 line-height 指定为 font-size 的倍数。由于 font-size-adjust 属性会影响 font-size 的使用值，因此在设置使用 font-size-adjust 时的行高时，作者应多加小心。在这种情况下，将行高设置得太紧可能会导致文本行重叠。

作者可以通过比较内容相同但 font-size-adjust 属性不同的 span，来为给定字体计算纵横比值。如果使用相同的字体大小，当 font-size-adjust 值对给定字体准确时，span 将会匹配。

使用两个带边框的 span 来确定字体的纵横比值。font-size 对于两个 span 都是相同的，但 font-size-adjust 属性仅为右侧 span 指定。从 0.5 的值开始，可以调整纵横比值，直到两个字母周围的边框对齐。

p {
  font-family: Futura;
  font-size: 500px;
}

span {
  border: solid 1px red;
}

.adjust {
  font-size-adjust: 0.5;
}

<p><span>b</span><span class="adjust">b</span></p>

Futura with an aspect value of 0.5 — Futura，纵横比值为 0.5

右侧的方框比左侧的稍微大一点，因此该字体的纵横比值小于 0.5。调整该值直到方框对齐。

2.7. 简写字体属性：font 属性

名称	字体 (font)
值	[ [ <'font-style'> \|\| <font-variant-css2> \|\| <'font-weight'> \|\| <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] \| <system-font-family-name>
初始值	见各个属性
应用于	所有元素和文本
可继承	是
百分比	见各个属性
计算值	见各个属性
规范顺序	按语法
动画类型	见各个属性

测试

此属性的语法基于一种传统的排版速记符号，用于设置多个与字体相关的属性。出于历史原因和向后兼容性的考虑，它几乎是一个速记属性。

font 属性（下文所述情况除外）是一个速记属性，用于在样式表中同一位置设置 font-style、font-variant、font-weight、font-width、font-size、line-height 和 font-family。

font-variant 属性的值也可以包含在内，但仅限于 CSS 2.1 中支持的值；CSS Fonts Level 3 或 4 中添加的任何 font-variant 值都不能在 font 速记属性中使用。

<font-variant-css2>
    = normal | small-caps

font-width 属性的值也可以包含在内，但仅限于 CSS Fonts Level 3 中支持的值；本规范中添加的任何 font-width 值都不能在 font 速记属性中使用。

<font-width-css3>
    = normal | ultra-condensed | extra-condensed | condensed |
    semi-condensed | semi-expanded | expanded | extra-expanded |
    ultra-expanded

因此，我们对字体相关属性及其与 font 属性的交互进行了如下分类：

显式设置

这些长式属性也可以通过 font 速记属性进行设置。

font-family
font-size
font-width
font-stretch (css3)
font-style
font-variant-caps (css2)
font-weight
line-height

隐式重置

这些属性是 font 属性的仅重置子属性，因此无法设置，而是被重置为它们的初始值。

font-feature-settings
font-kerning
font-language-override
font-optical-sizing
font-size-adjust
font-variant-alternates
font-variant-caps (css3 及以上版本)
font-variant-east-asian
font-variant-emoji
font-variant-ligatures
font-variant-numeric
font-variant-position
font-variation-settings

独立级联

尽管这些属性名称以 "font-" 开头，但它们不是速记属性，因此不会被 font 属性设置或重置。

font-palette
font-synthesis-weight
font-synthesis-style
font-synthesis-small-caps

font 属性中属于“显式设置”和“隐式重置”组的所有子属性，首先会被重置为它们的初始值。

然后，对于“显式设置”组中那些在 font 速记属性中给出了显式值的属性，将被设置为这些值。关于允许值和初始值的定义，请参见各长式属性的单独定义。

p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% "new century schoolbook", serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: condensed oblique 12pt "Helvetica Neue", serif; }
p { font: condensed oblique 25deg 753 12pt "Helvetica Neue", serif; }

在第二条规则中，字号百分比值（“80%”）参考的是父元素的计算出的 font-size。在第三条规则中，行高百分比（“110%”）参考的是元素本身的字号。

前三条规则没有显式指定 font-variant 和 font-weight，因此这些属性接收它们的初始值（normal）。注意，包含空格的字体族名称 "new century schoolbook" 被引号括起来了。第四条规则将 font-weight 设置为 bold，将 font-style 设置为 italic，并隐式地将 font-variant 设置为 normal。

第五条规则设置了 font-variant（small-caps）、font-size（父元素字号的 120%）、line-height（字号的 120%）和 font-family（fantasy）。因此，关键字 normal 适用于剩余的两个属性：font-style 和 font-weight。

第六条规则设置了 font-style、font-width、font-size 和 font-family，其他字体属性被设置为它们的初始值。

第七条规则将 font-style 设置为 oblique 25deg，将 font-weight 设置为 753，并将 font-width 设置为 condensed。注意，此规则中的 25deg 必须紧跟在 "oblique" 关键字之后。

由于 font-width 属性未在 CSS 2.1 中定义，因此在 font 规则中使用 font-width 值时，作者应包含一个与旧版用户代理兼容的额外版本。

p {
  font: 80% sans-serif;   /* for older user agents */
  font: condensed 80% sans-serif;
}

系统字体只能作为一个整体来设置；也就是说，字体族、字号、字重、风格等都是同时设置的。如果需要，随后可以单独更改这些值。如果给定平台上不存在具有指定特征的字体，用户代理应智能地进行替换（例如，可能会使用 caption 字体的较小版本作为 small-caption 字体），或者替换为用户代理的默认字体。对于常规字体，如果系统字体的任何独立属性不是操作系统可用用户偏好设置的一部分，则这些属性应设置为它们的初始值。

这就是为什么这个属性“几乎”是一个速记属性：系统字体只能用此属性指定，不能用 font-family 本身指定，因此 font 允许作者做的事情超过了其子属性的总和。然而，像 font-weight 这样的独立属性仍然会被赋予取自系统字体的值，这些值是可以独立改变的。

注意，上面列出的用于系统字体的关键字仅在位于初始位置时才被视为关键字，在其他位置时，该字符串被视为字体族名称的一部分。

font: menu;        /* use the font settings for system menus */
font: large menu;  /* use a font family named "menu" */

button { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
button p { font: menu }
button p em { font-weight: bolder }

如果特定系统上用于下拉菜单的字体碰巧是例如 9 磅的 Charcoal，粗细为 600，那么作为 BUTTON 后代的 P 元素将显示为好像此规则有效一样。

button p { font: 600 9pt Charcoal }

因为 font 速记属性会将任何未显式赋值的属性重置为初始值，这与此声明具有相同的效果：

button p {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}

2.8. 控制合成字体

当字体族缺少合适的字形时，合成字体是一种提供近似所请求字体的后备策略。

例如，用户代理可以：

通过在每个字形周围绘制细线来合成粗体字形
通过以较小尺寸渲染常规字形并进行适当定位来合成小型大写字母、上标或下标
通过对每个字形进行几何剪切来合成斜体字形

合成是一种后备策略，因为最终结果虽然可能比什么都没有要好，但达不到专为此目的而设计的字形的质量水平。

可变字体（字体设计师提供了一个或多个变化轴的字体）不属于字体合成，其使用不受 font-synthesis 属性的影响。

2.8.1. 控制合成粗体：font-synthesis-weight 属性

名称	font-synthesis-weight
值	auto \| none
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)
媒体	视觉

测试

此属性控制当字体族缺少粗体字形时，是否允许用户代理合成粗体字形。

auto: 允许合成粗体字形
none（无）: 不允许合成粗体字形

2.8.2. 控制合成斜体：font-synthesis-style 属性

名称	font-synthesis-style
值	auto \| none \| oblique-only
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)
媒体	视觉

测试

此属性控制当字体族缺少斜体字形时，是否允许用户代理合成斜体字形。

auto: 允许合成斜体字形
none（无）: 不允许合成斜体字形
oblique-only: 允许合成斜体字形，但在指定了 italic 时不得将其用作后备

在垂直文本中，对于正斜倾角，字形会被倾斜，使得线顶边缘向右侧移动，而线底边缘向左侧移动。对于负斜倾角，字形会被倾斜，使得线顶边缘向左侧移动，而线底边缘向右侧移动。倾斜是围绕字形的中心进行的。

测试

synthetic-oblique-out-of-capabilities-range.html (实时测试) (源码)

synthetic oblique in vertical text — 垂直文本中的合成斜体，正斜倾角

2.8.3. 控制合成小型大写字母：font-synthesis-small-caps 属性

名称	font-synthesis-small-caps
值	auto \| none
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性控制当字体族缺少小型大写字母字形时，是否允许用户代理合成小型大写字母字形。

auto: 允许合成小型大写字母字形
none（无）: 不允许合成小型大写字母字形

2.8.4. 控制合成上标和下标：font-synthesis-position 属性

名称	font-synthesis-position
值	auto \| none
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性控制当字体缺少上标和下标字形时，用户代理是否被要求为 font-variant-position 合成上标和下标字形。

auto: 要求合成上标和下标形式
none（无）: 不允许合成上标和下标形式

2.8.5. 控制合成字体：font-synthesis 速记属性

名称	font-synthesis
值	none \| [ weight \|\| style \|\| small-caps \|\| position]
初始值	weight style small-caps position
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定的关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性是 font-synthesis-weight、font-synthesis-style、font-synthesis-small-caps 和 font-synthesis-position 属性的速记。值映射如下：

font-synthesis 值	font-synthesis-weight 值	font-synthesis-style 值	font-synthesis-small-caps 值	font-synthesis-position 值
none（无）	none（无）	none（无）	none（无）	none（无）
weight（权重）	auto	none（无）	none（无）	none（无）
style	none（无）	auto	none（无）	none（无）
small-caps	none（无）	none（无）	auto	none（无）
position	none（无）	none（无）	none（无）	auto
weight style	auto	auto	none（无）	none（无）
weight small-caps	auto	none（无）	auto	none（无）
weight position	auto	none（无）	none（无）	auto
style small-caps	none（无）	auto	auto	none（无）
style position	none（无）	auto	none（无）	auto
small-caps position	none（无）	none（无）	auto	auto
weight style small-caps	auto	auto	auto	none（无）
weight style position	auto	auto	none（无）	auto
weight small-caps position	auto	none（无）	auto	auto
style small-caps position	none（无）	auto	auto	auto
weight style small-caps position	auto	auto	auto	auto

下面的样式规则禁用了对阿拉伯文进行合成斜体的使用。

*:lang(ar) { font-synthesis: none; }

3. 字体渲染控制

3.1. 字体渲染控制简介

当通过 @font-face 使用可下载的 Web 字体时，用户代理需要知道字体在积极加载时该做什么。大多数网络浏览器已采用某种形式的超时机制。

浏览器	超时	回退 (Fallback)	交换
Chrome 35+	3 秒	是	是
Opera	3 秒	是	是
Firefox	3 秒	是	是
Internet Explorer	0 秒	是	是
Safari	3 秒	是	是

Chrome 和 Firefox 有 3 秒的超时时间，之后文本会显示为后备字体。最终会发生一次交换：一旦所需的字体可用，文本将使用该字体重新渲染。
Internet Explorer 有 0 秒的超时时间，这会导致文本立即渲染：如果请求的字体尚未可用，则使用后备字体，并在请求的字体可用后稍后重新渲染文本。

虽然这些默认行为是合理的，但遗憾的是它们在不同浏览器之间不一致。更糟糕的是，没有哪一种单一方法足以涵盖现代注重用户体验和性能的应用程序所需的各种用例。

字体加载 API [CSS-FONT-LOADING-3] 允许开发者覆盖上述部分行为，但这需要编写脚本，需要付出不小的努力，且最终无法提供足够的钩子来覆盖所有合理的情况。此外，开发者还需要将加载脚本内联到页面中或加载外部库，这会引入额外的网络延迟，从而延迟文本渲染。

注重设计/性能的 Web 开发者对给定 Web 字体对于预期用户体验的相对重要性有很好的把控。本规范赋予他们控制字体超时和渲染行为的能力。具体而言，它允许开发者：

在文本准备绘制时定义字体显示策略：阻塞，或使用后备字体绘制。
在所需字体可用后定义字体显示策略：使用新字体重新渲染文本，或保持原先的后备字体。
为每个字体定义自定义超时值。
为每个元素定义自定义的显示和超时策略。

3.2. 字体显示时间线

在用户代理首次尝试在页面上使用给定的已下载字体字形的那一刻，该字体的字体下载计时器就会启动。此计时器会经过与该字体字形关联的三个时间段——阻塞周期、交换周期和失败周期——这些周期决定了使用该字体字形的任何元素的渲染行为。

第一个周期是字体阻塞周期。在此期间，如果字体字形未加载，任何尝试使用它的元素都必须改为使用隐形后备字体字形进行渲染。如果字体字形在阻塞周期内成功加载，则该字体字形随后将正常使用。
第二个周期出现在阻塞周期之后，是字体交换周期。在此期间，如果字体字形未加载，任何尝试使用它的元素都必须改为使用后备字体字形进行渲染。如果字体字形在交换周期内成功加载，则该字体字形随后将正常使用。
第三个周期出现在交换周期之后，是字体失败周期。如果此周期开始时字体字形尚未加载，它将被标记为加载失败，从而导致正常的字体回退。否则，该字体字形将正常使用。

要为给定元素使用后备字体字形进行渲染，用户代理必须找到在该元素的 font-family 列表中指定的第一个已加载的字体字形，并将其用于文本渲染。执行此操作不得触发任何后备字体的加载。

要为给定元素使用隐形后备字体字形进行渲染，请按照“使用后备字体字形进行渲染”查找字体字形。创建一个与选定字体字形具有相同度量但所有字形均为“不可见”（不含任何“墨迹”）的匿名字体字形，并将其用于渲染文本。执行此操作不得触发任何后备字体的加载。

fallback 和 optional 可能导致字体族中的某些字形被使用，而另一些则必须回退，从而产生一种“勒索信”般的外观。也许可以要求同一字体族中的所有字体具有相同的行为（全部交换，或全部回退）？另请参阅 @font-feature-values 以基于字体族控制行为。

4. 字体资源

4.1. @font-face 规则

@font-face 规则允许链接到在需要时自动获取并激活的字体。这允许作者选择与给定页面的设计目标高度匹配的字体，而不是将字体选择限制在特定平台上可用的一组字体中。一组字体描述符定义了字体资源的位置（本地或外部），以及单个字形集的样式特征。多个 @font-face 规则可用于构建具有多种字形的字体族。使用 CSS 字体匹配规则，用户代理可以有选择地仅下载给定文本段落所需的字形。

其语法为：

@font-face {
  <declaration-list>
}

测试

@font-face 规则接受本规范中定义的描述符。

每个 @font-face 规则都会隐式或显式地为每个字体描述符指定一个值。规则中未给出显式值的描述符将采用本规范中列出的每个描述符的初始值。这些描述符仅在定义它们的 @font-face 规则上下文中应用，而不应用于文档语言元素。不存在描述符应用于哪些元素或值是否被子元素继承的概念。当给定描述符在同一个 @font-face 规则中多次出现时，仅使用最后一个描述符声明，所有先前的声明都将被忽略。

使用名为 Gentium 的可下载字体：

@font-face {
font-family: Gentium;
src: url(http://example.com/fonts/Gentium.woff);
}

p { font-family: Gentium, serif; }

用户代理将下载 Gentium 并在渲染段落元素内的文本时使用它。如果由于某种原因提供该字体的站点不可用，则将使用默认衬线字体。

给定的一组 @font-face 规则定义了可供包含这些规则的文档使用的一组字体。执行字体匹配时，会优先考虑使用这些规则定义的字体，然后再考虑系统上其他可用的字体。

下载的字体仅对引用它们的文档可用。激活这些字体的过程不得使其对其他应用程序或其他未直接链接到同一字体的文档可用。用户代理实现者可能认为在渲染其他文档中的字符且没有其他可用字体时，使用已下载的字体作为已安装字体后备过程的一部分是很方便的。然而，这将导致安全漏洞，因为一个页面的内容将能够影响其他页面，攻击者可能会将其用作攻击向量。这些限制不会影响缓存行为，字体与其他 Web 资源的缓存方式相同。

测试

此 at-rule 遵循 CSS 的前向兼容解析规则。与声明块中的属性一样，必须忽略用户代理不支持的任何描述符的声明。@font-face 规则需要 font-family 和 src 描述符；如果两者缺少其一，在执行字体匹配算法时，必须不考虑该 @font-face 规则。

在用户代理平台资源有限或实现了禁用可下载字体资源能力的情况下，@font-face 规则应直接被忽略；本规范定义的各个描述符的行为不应被更改。

4.2. 字体族：font-family 描述符

名称	font-family
对于	@font-face
值	<font-family-name>
初始值	不适用

此描述符定义了将在所有 CSS 字体族名称匹配中使用的字体族名称。它覆盖了底层字体数据中包含的字体族名称。如果字体族名称与给定用户环境中可用的字体族相同，它实际上会为使用该样式表的文档隐藏底层字体。这允许 Web 作者自由选择字体族名称，而不必担心与给定用户环境中存在的字体族名称冲突。同样，不得使用给定字体族名称的平台替换项。

4.3. 字体引用：src 描述符

名称	src
对于	@font-face
值	<font-src-list>
初始值	不适用

此描述符指定包含字体数据的资源。其值是一个优先的、逗号分隔的外部引用列表或本地安装的字体字形名称。当需要字体时，用户代理会遍历所列出的引用集，使用它能够成功解析和激活的第一个引用。解析此描述符比解析其他描述符更复杂；参见 § 4.3.1 解析 src 描述符获取解析规则。激活字体涉及下载文件或从磁盘读取它、对其进行解析，可能还涉及额外的用户代理依赖步骤。包含无效数据的字体或未找到的本地字体字形将被忽略，用户代理将加载列表中的下一个字体。

4.3.1. 解析 src 描述符

要解析 <font-src-list> 产品，请解析一个列表，其中的元素为 <font-src>。

<font-src> = <url> [ format( <font-format> ) ]? [ tech( <font-tech># ) ]?
  | local( <font-family-name> )

<font-format>
    = [ <string> | collection | embedded-opentype | opentype
      | svg | truetype | woff | woff2 ]

<font-tech>
    = [ <font-features-tech> | <color-font-tech>
      | variations | palettes | incremental ]

<font-features-tech>
    = [ features-opentype | features-aat | features-graphite ]

<color-font-tech>
    = [ color-COLRv0 | color-COLRv1 | color-SVG | color-sbix | color-CBDT ]

测试

虽然首选使用关键字来标识字体格式，但出于向后兼容性的原因，也接受以下字符串，其效果与使用等效的现代语法相同。

字符串形式	等效语法
format("woff2")	format(woff2)
format("woff")	format(woff)
format("truetype")	format(truetype)
format("opentype")	format(opentype)
format("collection")	format(collection)
format("woff2-variations")	format(woff2) tech(variations)
format("woff-variations")	format(woff) tech(variations)
format("truetype-variations")	format(truetype) tech(variations)
format("opentype-variations")	format(opentype) tech(variations)

测试

format-specifiers-variations.html (实时测试) (源码)

注：CSS WG 预计将来不会扩展此格式字符串列表。

如果组件值解析正确，并且属于 UA 支持的字体格式或字体技术，则将其添加到支持的源列表中。如果解析组件值导致解析错误，或者其格式或技术不受支持，则不要将其添加到支持的源列表中。

如果在此过程结束时没有支持的条目，则 src 描述符的值是一个解析错误。

这些解析规则允许用户代理在不支持特定字体技术或字体格式的情况下进行优雅的字体回退。

例如，在不支持增量传输时，为获得最佳性能，提供 woff2 压缩版本的字体。然后，对于增量传输，提供原始未压缩的 OpenType 字体，其中的部分内容将按需加载。

@font-face {
  font-family: "MyIncrementallyLoadedWebFont";
  src: url("FallbackURLForBrowsersWhichDontSupportIncrementalLoading.woff2") format("woff2");
  src: url("MyIncrementallyLoadedWebFont.otf") format(opentype)  tech(incremental);
}

4.3.2. 加载 src 描述符中的单个项目

与其他 CSS 中的 URL 一样，URL 可以是相对路径，在这种情况下，它相对于包含 @font-face 规则的样式表的位置进行解析。对于 SVG 字体，URL 指向包含 SVG 字体定义的文档中的元素。如果省略了元素引用，则暗示引用第一个定义的字体。同样，可以包含多个字体的字体容器格式必须为给定的 @font-face 规则加载一个且仅一个字体。片段标识符用于指示要加载哪个字体；这些使用 [RFC8081] 中定义的字体的 PostScript 名称。

测试

font-opentype-collections.html (实时测试) (源码)

符合要求的用户代理除非其 PostScript 名称与片段标识符完全匹配，否则不得使用来自该资源的字形，并且如果给定的片段标识符不是有效的 PostScript 名称，则必须跳过下载该资源。

src: url(fonts/simple.woff);       /* load simple.woff relative to stylesheet location */
src: url(/fonts/simple.woff);      /* load simple.woff from absolute location */
src: url(fonts/coll.otc#foo);      /* load font foo from collection coll.otc
src: url(fonts/coll.woff2#foo);    /* load font foo from woff2 collection coll.woff2
src: url(fonts.svg#simple);        /* load SVG font with id 'simple' */

4.3.3. 选择 src 中的项目

外部引用由 URL 组成，后跟一个可选提示，描述该 URL 所引用的字体资源的格式。符合要求的用户代理如果格式提示指示不支持或未知的字体格式，或者用户代理不支持任何字体技术，则必须跳过下载该字体资源。如果未提供格式提示，用户代理应下载该字体资源。

例如，以下代码展示了如何尽可能加载 WOFF 2 字体，否则加载 WOFF 1，否则使用 OpenType 字体：

@font-face {
  font-family: bodytext;
  src: url(ideal-sans-serif.woff2) format("woff2"),
    url(ideal-sans-serif.woff) format("woff"),
    url(basic-sans-serif.ttf) format("opentype");
}

在此示例中，如果 woff2 不受支持，则会跳过不受支持且虚构的 "zebra" 格式，并下载 opentype 字体。

src: url(ideal.woff2) format("woff2"),
    url(unsupported.zeb) format("zebra"),
    url(basic.ttf) format("opentype");

这里加载集合中的单个实例，或者如果不支持集合，则下载单个字体。

@font-face {
  font-family: 源ノ角ゴシック Code JP;
  src: url(SourceHanCodeJP.otc#Regular) format("collection"),
    url(SourceHanCodeJP-Regular.ttf) format("opentype");
}

4.3.3.1. 本地字体后备

当作者希望使用给定字体的本地可用副本，并在其不存在时下载时，可以使用 local()。传给 local() 的本地安装的 <font-family-name> 参数是一个特定于格式的字符串，它在更广泛的字体族中唯一标识单个字体字形。名称可以根据需要用引号括起来。如果未加引号，则应用未加引号的字体族名称处理约定；换句话说，该名称必须是由空格分隔的标识符序列，并通过用单个空格连接这些标识符来转换为字符串；因此，CSS 范围关键字（如 inherit）和 <generic-font-family> 关键字（如 serif）不允许在 local() 内部使用。

/* regular face of Gentium */
@font-face {
  font-family: MyGentium;
  src: local(Gentium),    /* prefer locally available Gentium */
    url(Gentium.woff);  /* otherwise, download it */
}

例如，以下对 local() 的使用将是错误的：

@font-face {
  font-family: foo;
  src: local(inherit);
}

对于 OpenType 和 TrueType 字体，此字符串仅用于匹配本地可用字体名称表中的 Postscript 名称或完整字体名称。使用哪种类型的名称取决于平台和字体，因此作者应包含这两个名称，以确保跨平台正确匹配。不得使用给定字体名称的平台替换项。

/* bold face of Gentium */
@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),    /* full font name */
    local(Gentium-Bold),    /* Postscript name */
    url(GentiumBold.woff);  /* otherwise, download it */
  font-weight: bold;
}

就像 @font-face 规则指定字体族中单个字体的特征一样，与 local() 一起使用的唯一名称指定的是单个字体，而不是整个字体族。根据 OpenType 字体数据定义，Postscript 名称位于字体的名称表中，位于 nameID = 6 的名称记录中（有关详细信息，请参阅 [OPENTYPE]）。Postscript 名称是 OSX 上所有字体以及 Windows 下 Postscript CFF 字体的常用键。完整字体名称 (nameID = 4) 在 Windows 上用作 TrueType 字形字体的唯一键。

对于具有多种完整字体名称本地化版本的 OpenType 字体，必须使用美式英语版本（Windows 为语言 ID 0x409，Macintosh 为语言 ID 0），或者在没有美式英语完整字体名称时使用第一个本地化版本（OpenType 规范建议所有字体至少包含美式英语名称）。同时匹配其他完整字体名称（例如，当当前系统语言环境设置为荷兰语时匹配荷兰语名称）的用户代理被视为不符合标准。

注：这样做不是为了偏爱英语，而是为了避免跨字体版本和操作系统本地化造成匹配不一致，因为字体样式名称（例如“Bold”）经常被本地化为多种语言，且可用本地化集的范围在平台和字体版本之间差异很大。

匹配字体族名称 (nameID = 1) 与样式名称 (nameID = 2) 的连接的用户代理被视为不符合标准。

注：这也允许引用属于更广泛字体族且无法以其他方式引用的字形。

使用本地字体或引用其他文档中的 SVG 字体：

@font-face {
  font-family: Headline;
  src: local(Futura-Medium),
    url(images/fonts.svg#MyGeometricModern) format("svg");
}

为不同平台上的本地日语字体创建别名：

@font-face {
  font-family: jpgothic;
  src: local(HiraKakuPro-W3), local(Meiryo), local(IPAPGothic);
}

引用无法在更广泛的字体族中匹配的字体字形：

@font-face {
  font-family: Hoefler Text Ornaments;
  /* has the same font properties as Hoefler Text Regular */
  src: local(HoeflerText-Ornaments);
}

由于本地化的完整名称永远不会匹配，具有以下标题样式规则的文档将始终使用默认衬线字体渲染，无论特定的系统语言环境参数是否设置为芬兰语：

@font-face {
  font-family: SectionHeader;
  src: local("Arial Lihavoitu");  /* Finnish fullname for Arial Bold, should fail */
  font-weight: bold;
}

h2 { font-family: SectionHeader, serif; }

符合要求的用户代理永远不会在下面的示例中加载字体 'gentium.eot'，因为它包含在 src 描述符的第一个定义中，该定义被同一个 @font-face 规则中的第二个定义所覆盖。

@font-face {
  font-family: MainText;
  src: url(gentium.eot);                     /* for use with older user agents */
  src: local("Gentium"), url(gentium.woff);  /* Overrides src definition */
}

4.4. 字体属性描述符：font-style、font-weight 和 font-width 描述符

名称	font-style
对于	@font-face
值	auto \| normal \| italic \| left \| right \| oblique [ <angle [-90deg,90deg]>{1,2} ]?
初始值	auto

名称	font-weight
对于	@font-face
值	auto \| <font-weight-absolute>{1,2}
初始值	auto

名称	font-width
对于	@font-face
值	auto \| <'font-width'>{1,2}
初始值	auto

测试

这些描述符定义了字体面的特征，并用于将样式与特定字体面进行匹配的过程中。对于定义了多个 @font-face 规则的字体族，用户代理既可以下载该族中的所有字体面，也可以使用这些描述符选择性地下载与文档中使用的实际样式相匹配的字体面。这些描述符值的含义与对应的字体属性相同，但相对关键字 bolder 和 lighter 除外。如果省略这些描述符，则假定为初始值。如果指定的值超出了同名属性可接受的值范围，则该描述符将被视为解析错误。

这三个描述符中可以使用范围来代替单个值。当指定单个值时，其含义与起始点和结束点相同的范围相同。用户代理必须交换范围的起始点和结束点的计算值，以禁止递减范围。两个端点都是包含的。这些范围用于下方的字体匹配算法。

测试

这三个描述符的 auto 值具有以下效果

出于字体选择目的，字体的选择就像选择了相应的正常值（normal，normal 或 normal）一样
对于变体轴限制，不进行限制

这些字体面样式属性的值用于代替底层字体数据所隐含的样式。这允许作者以灵活的组合方式结合字体面，即使在原始字体数据排列方式不同的情况下也是如此。实现合成粗体和倾斜的用户代理必须仅在字体描述符暗示有此需要时才应用合成样式，而不是基于字体数据隐含的样式属性。然而，应用于由 '@font-face' 定义的字体的变体值将被限制在这些描述符中指定的值，或通过应用变体参数（例如为了满足所请求的 font-weight 而操纵 wght 轴）隐含的值，以及字体文件本身支持的值范围内。

测试

synthetic-bold-out-of-capabilities-range.html (实时测试) (源码)

本节中定义的字体描述符用于从给定字体族的 @font-face 规则所定义的字体集合中选择一种字体。

考虑一个包含单个常规字体面的字体族

@font-face {
  font-family: BaskervilleSimple;
  src: url(baskerville-regular.woff2);
}

未设置样式的文本将显示为 @font-face 规则中定义的常规字体面

然而，在大多数用户代理中，斜体文本将使用来自常规字体面的合成倾斜字形来显示，因为未定义单独的斜体字体面

现在考虑一个定义了实际斜体字体面的字体族

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-regular.woff2);
}

@font-face {
  font-family: BaskervilleFull;
  src: url(baskerville-italic.woff2);
  font-style: italic;
}

第二个 @font-face 规则定义了字体资源 baskerville-italic.woff，其样式属性为正常字重、正常拉伸和斜体样式。显示斜体文本时，用户代理将使用此字体，因为它是斜体文本最接近的匹配。因此，文本将使用字体设计师设计的字形显示，而不是使用来自常规字体面的合成倾斜字形

有关选择特定字体族内特定字体面的过程的更详细信息，请参阅字体匹配部分。

字体可以声明它们兼容的 font-weight、font-width 和 font-style 的范围。

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont.woff2);
  font-weight: 100 399;
}

上述 @font-face 规则表示当 font-weight 在 100 到 399 之间时应使用 lastima-varfont.woff。取决于是否存在其他指定了 font-family: Lastima 的 @font-face 规则，lastima-varfont.woff 也可能被用于 100-399 范围之外的 font-weight 值。有关更多详细信息，请参阅第 5 节字体匹配算法。

如上文所述，多个 @font-face 规则可以组合成一个单一的字体族，涵盖多个 font-weight、font-width 和/或 font-style 范围

@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-lightrange.woff2);
  font-weight: 100 399;
}
@font-face {
  font-family: Lastima;
  src: url(lastima-varfont-heavyrange.woff2);
  font-weight: 400 700;
}

上述 @font-face 规则表明当 font-weight 在 100 到 399 之间时应使用 lastima-varfont-lightrange.woff，而当 font-weight 在 400 到 700 之间时应使用 lastima-varfont-heavyrange.woff。

4.4.1. 字体宽度：font-stretch 旧称别名

出于历史原因，存在一个 font-stretch 描述符，它是一个旧称别名，其功能与 font-width 描述符完全相同。

测试

4.5. 字符范围：unicode-range 描述符

名称	unicode-range
对于	@font-face
值	<unicode-range-token>#
初始值	U+0-10FFFF

测试

font-face-unicode-range-2.html (实时测试) (源码)
font-face-unicode-range-nbsp.html (实时测试) (源码)
font-face-unicode-range.html (视觉测试) (源码)

此描述符定义了声明该描述符的字体面可能支持的 Unicode 码点集合。描述符的值是一个以逗号分隔的 Unicode 范围标记（<unicode-range-token>）列表。这些范围的并集定义了码点集合，作为用户代理在决定是否为给定的文本运行下载字体资源时的提示。

每个 <unicode-range-token> 值都是一个由“U+”或“u+”前缀后跟码点范围组成的标记，范围有以下三种形式之一。不符合这些形式之一的范围是无效的，并会导致该声明被忽略。

单个码点（例如 U+416）: 一个 Unicode 码点，表示为一到六个十六进制数字
区间范围（例如 U+400-4ff）: 表示为由连字符分隔的两个 Unicode 码点，指示范围的包含性起始和结束码点
通配符范围（例如 U+4??）: 由尾随的 '?' 字符表示的码点集合所定义，每个 '?' 代表任意十六进制数字

单个码点使用对应于 Unicode 字符码点的十六进制值书写。Unicode 码点值必须在 0 到 10FFFF（含）之间。码点的数字值是 ASCII 大小写不敏感的。对于区间范围，起始和结束码点必须在上述范围内，且结束码点必须大于或等于起始码点。

带有 ‘?’ 但缺少初始数字的通配符范围（例如 "U+???"）是有效的，等同于具有初始零数字的通配符范围（例如 "U+0???" = "U+0000-0FFF"）。超出 Unicode 码点范围的通配符范围是无效的。因此，尾随的 '?' 通配符字符的最大数量为五个，即使 UNICODE-RANGE 标记接受六个。

在 unicode-range 描述符声明中，以逗号分隔的 Unicode 范围列表中，范围可能会重叠。这些范围的并集定义了相应字体可使用的码点集合。用户代理不得为该集合之外的码点下载或使用该字体。用户代理可以将范围列表规范化为一个不同但表示相同码点集合的列表。

关联的字体可能不包含由 unicode-range 描述符定义的整个码点集合的字形。使用该字体时，有效字符映射是 unicode-range 定义的码点与字体的字符映射的交集。这允许作者用广泛的范围来定义支持的范围，而无需担心底层字体支持的确切码点范围。

4.5.1. 使用字符范围定义复合字体

对于相同的字体族和样式描述符值，可以使用具有不同 Unicode 范围的多个 @font-face 规则，来创建混合来自不同字体的字形以适用于不同脚本的复合字体。这可以用于结合只包含单一脚本（例如拉丁文、希腊文、西里尔文）字形的字体，或者可以被作者用作将字体分割为常用字符字体和不常用字符字体的一种方式。由于用户代理只会下载它需要的字体，这有助于减少页面带宽。

如果一组具有相同字体族和样式描述符值的 @font-face 规则的 Unicode 范围重叠，则这些规则将按照它们定义的相反顺序进行排序；最后定义的规则是第一个针对给定字符进行检查的规则。

特定语言或字符的示例范围

unicode-range: U+A5;: 单个码点，日元/人民币符号
unicode-range: U+0-7F;: 基本 ASCII 字符的代码范围
unicode-range: U+590-5ff;: 希伯来语字符的代码范围
unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;: 日文汉字、平假名和片假名字符加上日元/人民币符号的代码范围

BBC 提供多种语言的新闻服务，其中许多语言在所有平台上的支持并不好。使用 @font-face 规则，BBC 可以为其中任何语言提供字体，正如其目前通过手动字体下载所做的那样。

@font-face {
  font-family: BBCBengali;
  src: url(fonts/BBCBengali.woff) format("woff");
  unicode-range: U+00-FF, U+980-9FF;
}

技术文档通常需要广泛的符号。STIX 字体项目是一个旨在以标准化方式提供支持广泛技术排版的字体的项目。下面的示例展示了如何使用一种为 Unicode 中许多数学和技术符号范围提供字形的字体

@font-face {
  font-family: STIXGeneral;
  src: local(STIXGeneral), url(/stixfonts/STIXGeneral.otf);
  unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
}

此示例展示了作者如何用不同字体的字形覆盖日文字体中用于拉丁字符的字形。第一个规则指定没有范围，因此默认为整个范围。第二个规则中指定的范围与第一个重叠，但因为它是后来定义的，所以具有优先权。

@font-face {
  font-family: JapaneseWithGentium;
  src: local(MSMincho);
  /* no range specified, defaults to entire range */
}

@font-face {
  font-family: JapaneseWithGentium;
  src: url(../fonts/Gentium.woff);
  unicode-range: U+0-2FF;
}

考虑通过将拉丁文、日文和其他字符分离到不同的字体文件中来优化带宽而构建的字体族

/* fallback font - size: 4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff);
  /* no range specified, defaults to entire range */
}

/* Japanese glyphs - size: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* Latin, Greek, Cyrillic along with some
  punctuation and symbols - size: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

对于简单的拉丁文本，仅下载拉丁字符的字体

body { font-family: DroidSans; }

<p>This is that</p>

在这种情况下，用户代理首先检查包含拉丁字符的字体（DroidSans.woff）的 Unicode 范围。由于上述所有字符都在 U+0-5FF 范围内，用户代理会下载该字体并使用它渲染文本。

接下来，考虑使用箭头字符（⇨）的文本

<p>This &#x21e8; that<p>

用户代理再次首先检查包含拉丁字符的字体的 Unicode 范围。由于 U+2000-2300 包含箭头码点（U+21E8），用户代理会下载该字体。但是，对于此字符，拉丁字体没有匹配的字形，因此用于字体匹配的有效 Unicode 范围排除了此码点。接下来，用户代理评估日文字体。日文字体的 Unicode 范围（U+3000-9FFF 和 U+ff??）不包含 U+21E8，因此用户代理不会下载日文字体。接下来考虑回退字体。回退字体的 @font-face 规则没有定义 Unicode 范围，因此其值默认为所有 Unicode 码点的范围。回退字体被下载并用于渲染箭头字符。

4.6. 字体特征和变体：font-feature-settings 和 font-variation-settings 描述符

名称	font-feature-settings
对于	@font-face
值	normal \| <feature-tag-value>#
初始值	normal

测试

名称	font-variation-settings
对于	@font-face
值	normal \| [ <string> <number>]#
初始值	normal

测试

这些描述符定义了渲染由 @font-face 规则定义的字体时适用的初始设置。它们不影响字体选择。其值与下文定义的相应 font-feature-settings 和 font-variation-settings 属性所定义的值相同，但省略了 CSS 宽关键字。当使用多个字体特征描述符、属性或变体，并可选地与命名实例一起使用时，对文本渲染的累积影响将在下方的第 7 节字体特征和变体解析中详细说明。

这些描述符设置的是 @font-face 规则所表示的字体对象上的特征和变体值，而不是整个元素上的。因此，使用这些描述符时，由于第 5.3 节簇匹配的原因，元素中的某些字形可能不会被渲染该特征。

4.7. 使用可变字体中的命名实例：font-named-instance 描述符

名称	font-named-instance
对于	@font-face
值	auto \| <string>
初始值	auto

如果 font-named-instance 描述符设置为除 auto 以外的值，则第 7 节字体特征和变体解析中的相应阶段将检查字体文件，以查找字体中第一个其本地化名称等于给定 <string> 的命名实例，规则依据第 5.1 节本地化名称匹配。如果不存在此类命名实例，则该描述符被视为具有值 'font-named-instance/auto'。否则，该命名实例的变体轴值将应用于第 7 节字体特征和变体解析中的此位置。

例如，以下 @font-face 块将应用名为 "Grotesque" 的实例，但会将 "XHGT" 轴的值覆盖为 0.7。

@font-face {
  font-family: "AccuroVar";
  src: url("accurovar.otf") format("opentype");
  font-named-instance: "Grotesque";
  font-variation-settings: "XHGT" 0.7;
}

注意：由于 font-weight、font-width 和 font-style 属性中提供的变体轴值是在 font-named-instance 描述符中的值之前应用的，因此当需要命名实例时，无需更改这些属性的值。

4.8. 字体请求指南

4.8.1. 字体加载指南

@font-face 规则旨在允许延迟加载仅在文档中使用时才下载的字体资源。样式表可以包含字体库的 @font-face 规则，其中只有一部分会被使用；用户代理必须仅下载在给定页面适用的样式规则中所引用的那些字体。那些不考虑字体是否实际上在页面中使用，而直接下载 @font-face 规则中定义的所有字体的用户代理被认为是不符合规范的。在字符回退情况下可能下载字体的情况下，如果字体包含在给定文本运行的 font-family 计算值内，用户代理可以下载该字体。

@font-face {
  font-family: GeometricModern;
  src: url(font.woff);
}

p {
  /* font will be downloaded for pages with p elements */
  font-family: GeometricModern, sans-serif;
}

h2 {
  /* font may be downloaded for pages with h2 elements, even if Futura is available locally */
  font-family: Futura, GeometricModern, sans-serif;
}

在下载的字体可用之前加载文本内容的情况下，用户代理必须根据该 @font-face 块的 font-display 描述符来渲染文本。在字体下载失败的情况下，用户代理必须可见地显示文本。建议作者在字体列表中使用与下载字体指标紧密匹配的回退字体，以尽可能避免页面大规模重排。

4.8.2. 字体获取要求

要为 @font-face 规则 给定所选的 <url> url 获取字体，请获取 url，其中 ruleOrDeclaration 为 规则，destination 为 "font"，CORS 模式为 "cors"，并且 processResponse 为给定响应 res 和 null、失败或字节流 流 的以下步骤

如果 流 为 null，则返回。
根据字体类型从 流 中加载字体。

注意：这对作者的影响是，除非作者明确采取措施允许跨源加载，否则字体通常不会跨源加载。网站可以使用 Access-Control-Allow-Origin HTTP 标头显式允许跨站点加载字体数据。对于其他方案，除了获取算法所允许的范围之外，没有定义或要求明确的机制来允许跨源加载。

测试

test_datafont_same_origin.html (实时测试) (源码)

对于下面的示例，假设文档位于 https://example.com/page.html，且所有 URL 都链接到用户代理支持的有效字体资源。

具有以下 src 描述符值的字体将被加载

/* same origin (i.e. domain, scheme, port match document) */
    src: url(fonts/simple.woff);

    /* data urls with no redirects are treated as same origin */
    src: url("data:application/font-woff;base64,...");

    /* cross origin, different domain */
    /* Access-Control-Allow-Origin response header set to '*' */
    src: url(http://another.example.com/fonts/simple.woff);

具有以下 src 描述符值的字体将无法加载

/* cross origin, different scheme */
    /* no Access-Control-xxx headers in response */
    src: url(http://example.com/fonts/simple.woff);

    /* cross origin, different domain */
    /* no Access-Control-xxx headers in response */
    src: url(http://another.example.com/fonts/simple.woff);

4.9. 每个字体面控制字体显示：font-display 描述符

@font-face 的 font-display 描述符根据字体面是否下载以及何时准备好使用，决定了该字体面如何显示。

名称	font-display
对于	@font-face
值	auto \| block \| swap \| fallback \| optional
初始值	auto

测试

注意：对于所有这些值，用户代理可能会使用略微不同的持续时间，或更复杂、无法直接用 font-display 语法表示的行为，以便为其用户提供更有用的行为。它们还可能为用户提供覆盖作者选择的行为的能力，例如强制所有字体具有 0s 的阻塞期。

auto

字体显示策略由用户代理定义。

注意：许多浏览器都有一个类似于 block 所指定的默认策略。

block

赋予字体面一个短暂的阻塞期（在大多数情况下推荐使用 3s）和无限的交换期。

注意：换句话说，如果字体未加载，浏览器最初会绘制“不可见”文本，但一旦字体加载完毕，就会立即交换该字体面。

此值仅应在页面可用需要以特定字体渲染文本时使用。它仅应针对一小段文本使用。

例如，设计拙劣的“图标字体”可能会将“⎙”（打印机）图标与像“P”这样不相关的字符关联起来，因此如果文本改为使用回退字体显示，页面上会散布着令人困惑的字母，而不是预期的图标。在这种情况下，暂时的空白点比使用回退字体更好。

(然而，最终还是会使用回退字体，因为页面上散布着令人困惑的字母总比让链接等内容永远显示不出来要好。)

一个更好的解决方案在无障碍辅助功能注意事项部分中描述。

swap

赋予字体面一个极小的阻塞期（在大多数情况下推荐使用 100ms 或更短）和无限的交换期。

注意：换句话说，如果字体面未加载，浏览器会立即使用回退字体绘制文本，但一旦字体加载完毕，就会立即交换该字体面。

此值仅应在以特定字体渲染文本对页面非常重要，但使用任何字体渲染仍能传达正确信息时使用。它仅应针对一小段文本使用。

例如，如果一个网站有用于渲染其 Logo 的自定义字体，则正确渲染该 Logo 对品牌推广而言相当重要，但以任何字体显示 Logo 至少能传达要点而不会产生混淆。

回退

赋予字体面一个极小的阻塞期（在大多数情况下推荐使用 100ms 或更短）和一个短暂的交换期（在大多数情况下推荐使用 3s）。

注意：换句话说，如果字体未加载，字体面最初会使用回退字体渲染，但在加载完毕后会立即交换。然而，如果时间过长，页面剩余的生命周期内将使用回退字体。

此值应用于正文文本或任何其他使用所选字体很有用且期望，但用户可以接受以回退字体查看文本的文本。此值适用于大段文本。

例如，在大段正文文本中，最重要的是尽快渲染文本，以便用户能尽快开始阅读。此外，一旦用户开始阅读，他们不应受到文本突然因新字体交换进入而“位移”的干扰，因为这会让人分心，并且很烦人地需要重新寻找阅读位置。

可选

如果字体可以“立即”加载（使其可用于文本的“首次绘制”），则使用该字体。

否则，字体将被视为其阻塞期和交换期在加载完成前均已过期。如果字体因此未被使用，用户代理可以选择中止字体下载，或以极低的优先级下载它。如果用户代理认为这对用户有益，它甚至可以避免开始字体下载，直接转而使用回退字体。

可选的字体 绝不能 导致页面在加载时发生“跳动”。用户代理可以选择稍微延迟使用可选字体的元素的渲染，以便给它时间从可能缓慢的本地缓存中加载，但一旦文本已经使用回退字体绘制到屏幕上，在页面剩余的生命周期内，不得再使用可选的字体进行渲染。

此值应用于正文文本或任何其他所选字体纯粹是装饰性的“锦上添花”内容的文本。当网页在首次访问时快速呈现，比用户等待更长时间才能立即看到完美效果更重要时，应该随时使用它。

例如，正文文本在浏览器默认字体中是完全可读的，尽管下载的字体面可能更具吸引力并与网站的美学更契合。首次访问网站的用户通常更关心网站是否能快速使用，而不是它显示的细微之处，而可选的属性为他们提供了良好的行为。如果他们稍后回来，所需的字体面可能已经下载完成，从而让他们获得“预期的”体验，而不会减慢他们第一次或后续访问的速度。

连接速度非常慢的用户可能永远无法获得“预期的”体验，但可选的属性确保他们能够实际使用该网站，而不是因为网站加载时间过长而退出并去别处。

为了增加可选的字体能够及时用于渲染某些文本的可能性，建议用户代理采用启发式方法来加快访问速度，或判断延迟渲染某些文本是否值得，例如检查字体是否在 HTML 中进行了预加载，或者一旦在样式表中看到该字体（在知道它是否会在页面上使用之前），就立即将其从较慢的内存缓存移到较快的内存缓存中。

然而，作者不能依赖这些启发式方法；必须理解可选的值可能导致字体永远不会被使用。如果需要更高的字体使用保证，作者应考虑使用回退值。

4.9.1. 通过 @font-feature-values 控制每个字体族的字体显示

@font-feature-values 的 font-display 描述符通过为针对相同字体族的 @font-face 规则设置“默认”font-display 值，来确定字体族如何显示。当 @font-face 规则中省略了 font-display 时，用户代理会使用通过 @font-feature-values 为相关字体族设置的 font-display 值（如果已设置），否则默认为 auto。

此机制可用于为整个字体族设置默认显示策略，并使开发人员能够为他们无法直接控制的 @font-face 规则设置显示策略。例如，当字体由第三方字体厂商提供时，开发人员无法控制 @font-face 规则，但仍然能够为提供的字体族设置默认的 font-display 策略。能够为整个字体族设置默认策略也有助于避免“赎金信”效果（即不匹配的字体面），因为此时显示策略会应用于整个字体族。

名称	font-display
对于	@font-feature-values
值	auto \| block \| swap \| fallback \| optional
初始值	auto

4.10. 默认字体语言覆盖：font-language-override 描述符

名称	font-language-override
对于	@font-face
值	normal \| <string>
初始值	normal

此描述符定义了渲染由 @font-face 规则定义的字体时适用的初始设置。它不影响字体选择。其值与下文定义的 font-language-override 属性定义的值相同，但省略了 inherit 值。当使用多个字体特征描述符、属性或变体时，对文本渲染的累积影响将在下方的第 7 节字体特征和变体解析中详细说明。

4.11. 默认字体指标覆盖：ascent-override、descent-override 和 line-gap-override 描述符

名称	ascent-override
对于	@font-face
值	normal \| <percentage [0,∞]>
初始值	normal

测试

名称	descent-override
对于	@font-face
值	normal \| <percentage [0,∞]>
初始值	normal

测试

名称	line-gap-override
对于	@font-face
值	normal \| <percentage [0,∞]>
初始值	normal

测试

ascent-override、descent-override 和 line-gap-override 描述符分别定义了字体的上行指标、下行指标和行距指标。

当描述符值为 normal 时，相应的指标值直接从字体文件中获取。

注意：用户代理可能会从字体文件中不同的位置提取数据作为指标值，这会导致不同的文本布局。

当描述符值为百分比时，相应的指标值解析为给定百分比乘以使用的字体大小。负值在解析时无效。

百分比针对不同元素的不同字体大小进行解析。

@font-face {
  font-family: overridden-font;
  ascent-override: 50%;
  ...
}

<span style="font-family: overridden-font; font-size: 20px;">
  Outer span content
  <span style="font-size: 150%;">Inner span content</span>
</span>

外部 span 使用上行值 10px，而内部 span 使用 15px。

我们可以覆盖本地回退字体的指标以匹配主要字体，即 Web 字体。这减少了从回退字体切换到主要字体时的布局偏移。

@font-face {
  font-family: cool-web-font;
  src: url("https://example.com/font.woff");
}

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* Override metric values to match cool-web-font */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
}

<div style="font-family: cool-web-font, fallback-to-local">Title goes here</div>
<img src="https://example.com/largeimage" alt="A large image that you don't want to shift">

当用户代理完成加载并切换到使用 Web 字体时，图像将不会发生垂直位移。

5. 字体匹配算法

下方的算法描述了字体如何与单个文本运行相关联。对于运行中的每个字符，都会选择一个字体族，并选择一个包含该字符字形的特定字体面。

可用于字体匹配算法的已安装字体集合未明确定义。

已安装字体的默认集合因 UA、平台和区域设置而异；用户能够自定义哪些已安装字体可用于渲染网页，以及这些字体映射到哪些通用字体族（如果有的话），这一点很重要。

UA 可以选择向 Web 公开所有已安装的字体，无论该字体是如何安装的；这样做对于其主要语言不受操作系统自带字体支持的用户来说，很可能具有良好的国际化特性。

UA 也可以选择最初不公开任何用户安装的字体，以帮助保护 Web 上的隐私；因为用户安装的已安装字体集合通常被用作在 Web 上跟踪用户的跟踪向量。用户应该能够根据需要向该集合添加或从中删除字体。

UA 可以选择一种混合方法，其中一些用户安装的字体最初被公开以用于国际化，而另一些则不公开。同样，用户应该能够自定义此初始集合。

UA 被期望在默认情况下对其向 Web 公开的字体做出明智的决策，以便在国际化和隐私之间取得平衡。UA 还被期望为用户提供便捷的方式来添加和删除字体，以满足他们的特定需求。

测试

5.1. 本地化名称匹配

一些字体文件格式允许字体面携带特定字符串（例如族名或命名实例）的多种本地化版本。用户代理必须识别并正确匹配所有这些名称，而与底层平台本地化、所使用的系统 API 或文档编码无关。

例如，对于下面列出的每种字体，作者都可以在 font-family 属性中使用拉丁文名称或本地化名称，结果在所有系统上都是相同的

examples of localized family names — 本地化族名

用户代理必须不区分大小写地匹配这些名称，使用 Unicode 规范 [UNICODE] 中概述的“默认无大小写匹配”算法。该算法在第 3.13 节“默认大小写算法”中详细说明。具体而言，该算法的应用必须不规范化涉及的字符串，并且不应用任何特定语言的调整。此算法指定的大小写折叠方法使用 Unicode 字符数据库的 CaseFolding.txt 文件中状态字段为“C”或“F”的大小写映射。

注意：对于作者而言，这意味着字体族名称是不区分大小写匹配的，无论这些名称是存在于平台字体中，还是存在于样式表中包含的 @font-face 规则中。作者应注意确保名称使用的字符序列与实际的字体族名称一致，特别是在使用诸如变音符号之类的组合字符时。例如，包含小写字母 a (U+0061) 后跟组合圆圈 (U+030A) 的族名将不匹配看起来相同但使用预组合的小写 a-圆圈字符 (U+00E5) 而不是组合序列的名称。

注意：实现者应注意验证给定的无大小写字符串比较实现是否使用了此精确算法，不要假设给定的平台字符串匹配例程遵循它，因为许多此类例程具有特定于区域设置的行为或使用某种程度的字符串规范化。

5.2. 匹配字体样式

为文本运行中的给定字符选择字体的过程包括迭代 font-family 属性指定的字体族，根据其他字体属性选择具有适当样式的字体面，然后确定该字符是否存在字形。这是通过使用字体的字符映射来完成的，该数据将字符映射到该字符的默认字形。如果 (1) 字符包含在字体的字符映射中，且 (2) 如果包含脚本有要求，可获得该字符的整形信息，则该字体被认为支持给定字符。

一些旧字体可能在字符映射中包含给定字符，但缺乏正确渲染包含该字符的文本运行所需的整形信息（例如 OpenType 布局表或 Graphite 表）。

由基字符后跟一系列组合字符组成的码点序列的处理略有不同，请参阅下方的簇匹配部分。

在此过程中，给定字体族的默认字体面被定义为如果所有字体样式属性都设置为其初始值时会被选择的字体面。

使用给定元素的计算字体属性值，用户代理从 font-family 属性指定的第一个族名开始。
如果族名是通用字体族关键字，用户代理将查找要使用的相应字体族名称。用户代理可以根据包含元素的语言或字符的 Unicode 范围选择要使用的通用字体族。
对于其他族名，用户代理尝试在通过 @font-face 规则定义的字体中查找族名，然后在可用的已安装字体中查找（这可能包括字体别名），按照上文所述的第 5.1 节本地化名称匹配来匹配名称。如果 @font-face 规则中为给定字体面定义的字体资源不可用或包含无效字体数据，则该字体面应被视为在字体族中不存在。如果通过 @font-face 规则定义的字体族中没有字体面存在，则该字体族应被视为缺失；在这种情况下，不得匹配具有相同名称的平台字体。
如果发生字体族匹配，用户代理将组装该族中的字体面集合，然后使用下文列出的其他字体属性，按照指定的顺序将集合缩小为单一字体面。此组中可能存在能够支持 font-width、font-style 或 font-weight 属性范围的字体。在这种情况下，算法的进行就像集合中的每个支持的值组合都是一个唯一的字体一样。如果通过此算法最终选择了这样的字体，则在进行任何布局或渲染之前，必须应用 font-width、font-style 和 font-weight 的特定值。这些值的应用必须在第 7 节字体特征和变体解析中详细说明的应用字体匹配变体步骤中进行。对于此步骤，具有相同字体描述符值但 unicode-range 值不同的通过 @font-face 规则定义的一组字体面被视为一个单一的复合字体面
测试
1. 首先尝试 font-width。如果字体没有宽度值强度的概念，则根据属性定义中的表格映射其宽度值。如果匹配集包含宽度值中包含 font-width 所需值的字型，则将不包含所需宽度值的字型从匹配集中移除。如果没有字型包含所需的值，则使用下述规则选择宽度值。
  - 如果所需宽度值小于或等于 100%，则按降序检查低于所需宽度值的宽度值，随后按升序检查高于所需宽度值的宽度值，直到找到匹配项。
  - 否则，按升序检查高于所需宽度值的宽度值，随后按降序检查低于所需宽度值的宽度值，直到找到匹配项。
  通过此过程确定最接近的匹配宽度后，将不包含该已确定宽度的字型从匹配集中移除。
  
  此搜索算法可被视为距离函数，其中选择字体族中距离值最小的字型，并剔除所有不包含该值的字体。
  考虑一个包含 A、B 和 C 三种字体的字体族，每种字体都有关联的 font-width 描述符支持范围。如果元素样式为 "font-width: 125%"，则该搜索算法可形象化如下：
  
  如上图所示，字体 A、B 和 C 支持的字体宽度范围已列出。正如你所见，由于字体 B 包含了整个字体族中的最小宽度值，该算法会选择字体 B。然而，如果字体 B 被从该族中剔除，字体 C 将拥有族内最小距离，因此会被选中。
  
  与上一个示例类似，此处是样式为 "font-width: 75%" 的元素的距离概念图。
  
  正如你所见，由于字体 B 包含了整个字体族中的最小宽度值，该算法会选择字体 B。然而，如果字体 B 被从该族中剔除，字体 A 将拥有族内最小距离，因此会被选中。
2. 接下来尝试 font-style（参见 § 5.2 匹配字体样式）。如果字体没有斜体或倾斜角度强度的概念，则根据 font-style 属性定义中的说明映射其样式。
  
  如果 font-style 的值为 italic
  1. 如果匹配集包含其斜体值包含 italic 映射值的字型，则将不包含该所需斜体映射值的字型从匹配集中移除。
  2. 否则，按升序检查高于所需斜体值的斜体值，随后检查低于所需斜体值的斜体值，直到达到 0。在此阶段仅检查斜体值的正值。
  3. 如果未找到匹配项，按升序检查大于或等于 11deg 的倾斜（oblique）值，随后按降序检查低于 11deg 的倾斜值，直到达到 0。在此阶段仅检查倾斜值的正值。
    
    偏好倾斜字体（oblique）而非普通字体（normal）的阈值应低于平均角度。
  4. 如果未找到匹配项，按降序检查小于或等于 0 的斜体值，直到找到匹配项。
  5. 如果未找到匹配项，按降序检查小于或等于 0deg 的倾斜值，直到找到匹配项。
    
    与上一个示例类似，此处是样式为 "font-style: italic" 的元素的距离概念图。
    
    正如你所见，由于字体 D 包含了整个字体族中的最小斜体值，该算法会选择字体 D。然而，如果字体 D 被从该族中剔除，字体 E 将拥有族内最小距离，因此会被选中。如果 E 被剔除，则选中 C。如果 C 被剔除，字体 B 不会被立即选中；而是会参考倾斜值，可能会选中某个倾斜值。但是，如果没有选中倾斜值，则会选择字体 B，随后是字体 A。
  如果 font-style 的值为 oblique 且请求的角度大于或等于 11deg，
  1. 如果匹配集包含其倾斜值包含 oblique 值的字型，则将不包含所需倾斜值的字型从匹配集中移除。
  2. 否则，按升序检查高于所需倾斜值的倾斜值，随后检查低于所需倾斜值的倾斜值，直到达到 0。在此阶段仅检查倾斜值的正值。
  3. 对于具有 slnt 轴的可变字体，通过将 slnt 值设为指定的倾斜值来创建匹配。否则，如果 font-synthesis-style 的值为 auto，则通过几何倾斜（geometric shearing）到指定角度来产生回退匹配。
  4. 如果未找到匹配项，按升序检查大于或等于 1 的斜体值，随后按降序检查低于 1 的斜体值，直到达到 0。在此阶段仅检查斜体值的正值。
  5. 如果未找到匹配项，按降序检查小于或等于 0deg 的倾斜值，直到找到匹配项。
  6. 如果未找到匹配项，按降序检查小于或等于 0 的斜体值，直到找到匹配项。
    
    与上一个示例类似，此处是样式为 "font-style: oblique 40deg" 的元素的距离概念图。
    
    正如你所见，由于字体 D 包含了整个字体族中的最小倾斜值，该算法会选择字体 D。然而，如果字体 D 被从该族中剔除，字体 E 将拥有族内最小距离，因此会被选中。如果 E 被剔除，则选中 C。如果 C 被剔除，字体 B 不会被立即选中；而是会参考斜体值，可能会选中某个斜体值。但是，如果没有选中斜体值，则会选择字体 B，随后是字体 A。
  如果 font-style 的值为 oblique 且请求的角度大于或等于 0deg 且小于 11deg，
  1. 如果匹配集包含其倾斜值包含 oblique 值的字型，则将不包含所需倾斜值的字型从匹配集中移除。
  2. 否则，按降序检查低于所需倾斜值的倾斜值，直到达到 0，随后检查高于所需倾斜值的倾斜值。在此阶段仅检查倾斜值的正值。
  3. 对于具有 slnt 轴的可变字体，通过将 slnt 值设为指定的倾斜值来创建匹配。否则，如果 font-synthesis-style 的值为 auto，则通过几何倾斜到指定角度来产生回退匹配。
  4. 如果未找到匹配项，按降序检查小于 1 的斜体值，直到达到 0，随后按升序检查大于 1 的斜体值。在此阶段仅检查斜体值的正值。
  5. 如果未找到匹配项，按降序检查小于或等于 0deg 的倾斜值，直到找到匹配项。
  6. 如果未找到匹配项，按降序检查小于或等于 0 的斜体值，直到找到匹配项。
  与上一个示例类似，此处是样式为 "font-style: oblique 13deg" 的元素的距离概念图。
  
  正如你所见，由于字体 D 包含了整个字体族中的最小倾斜值，该算法会选择字体 D。然而，如果字体 D 被从该族中剔除，字体 C 将拥有族内最小距离，因此会被选中。如果 C 被剔除，则选中 E。如果 E 被剔除，字体 B 不会被立即选中；而是会参考斜体值，可能会选中某个斜体值。但是，如果没有选中斜体值，则会选择字体 B，随后是字体 A。
  
  如果 font-style 的值为 oblique 且请求的角度小于 0deg 且大于 -11deg，请遵循上述步骤，但使用取反的值和相反的方向。如果 font-style 的值为 oblique 且请求的角度小于或等于 -11deg，请遵循上述步骤，但使用取反的值和相反的方向。
  
  如果 font-style 的值为 normal，
  1. 按升序检查大于或等于 0 的倾斜值。
  2. 如果未找到匹配项，按升序检查大于或等于 0 的斜体值。
  3. 如果未找到匹配项，按降序检查小于 0deg 的倾斜值，直到找到匹配项。
  4. 如果未找到匹配项，按降序检查小于 0 的斜体值，直到找到匹配项。
  与上一个示例类似，此处是样式为 "font-style: normal" 的元素的距离概念图。
  
  正如你所见，由于字体 C 包含了整个字体族中的最小倾斜值，该算法会选择字体 C。然而，如果字体 C 被从该族中剔除，字体 B 不会被立即选中；而是会参考斜体值，可能会选中某个斜体值。但是，如果没有选中斜体值，则会选择字体 B，随后是字体 A。
  
  如果在上述搜索中找到了倾斜角度，则所有不包含该倾斜角度的字型将被从匹配集中排除。否则，如果在上述搜索中找到了斜体值，则所有不包含该斜体值的字型将被从匹配集中排除。
  测试
  - oblique-last-resort-weight-selection.html (实时测试) (源码)
  - oblique-request-italic-only-family-no-crash.html (实时测试) (源码)
  用户代理无需区分斜体（italic）和倾斜（oblique）字体。在此类用户代理中，上述 font-style 匹配步骤通过将斜体值和倾斜角度映射到同一标尺上执行。此映射的具体性质未定义，但斜体值 1 必须映射到与倾斜角度 11deg 相同的映射值。在通过 @font-face 规则定义的字体族中，斜体和倾斜字型必须使用 font-style 描述符的值进行区分。
  
  对于缺乏任何斜体或倾斜字型的字体族，如果 font-synthesis 属性的值允许，用户代理可以创建人造倾斜字型。
3. 接下来匹配 font-weight。如果字体没有字重强度的概念，则根据属性定义中的列表映射其字重。如果使用了更粗/更细的相对字重，则根据继承的字重值计算有效字重，如 font-weight 属性定义中所述。如果执行上述步骤后的匹配集包含字重值中包含所需 font-weight 值的字型，则将不包含所需 font-weight 值的字型从匹配集中移除。如果没有字型包含所需的值，则使用下述规则选择字重值。
  - 如果所需字重在 400 到 500 之间（含），则按升序检查大于或等于目标字重的字重，直到达到 500 并检查完毕，随后按降序检查小于目标字重的字重，随后按顺序检查大于 500 的字重，直到找到匹配项。
  - 如果所需字重小于 400，则按降序检查小于或等于所需字重的字重，随后按升序检查高于所需字重的字重，直到找到匹配项。
  - 如果所需字重大于 500，则按升序检查大于或等于所需字重的字重，随后按降序检查低于所需字重的字重，直到找到匹配项。
    测试
    - font-weight-search-direction.html (在线测试) (源码)
  与上一个示例类似，此处是样式为 "font-weight: 400" 的元素的距离概念图。
  
  正如你所见，由于字体 B 包含了整个字体族中的最小距离，该算法会选择字体 B。然而，如果字体 B 被从该族中剔除，字体 C 将拥有族内最小距离，因此会被选中。如果 C 被剔除，则选中 D，随后是字体 A，最后是 E。
  
  与上一个示例类似，此处是样式为 "font-weight: 450" 的元素的距离概念图。
  
  正如你所见，由于字体 C 包含了整个字体族中的最小距离，该算法会选择字体 C。然而，如果字体 C 被从该族中剔除，字体 D 将拥有族内最小距离，因此会被选中。如果 D 也被剔除，则选中 B，随后是字体 A，最后是 E。
  
  与上一个示例类似，此处是样式为 "font-weight: 500" 的元素的距离概念图。
  
  正如你所见，由于字体 D 包含了整个字体族中的最小距离，该算法会选择字体 D。然而，如果字体 D 被从该族中剔除，字体 B 将拥有族内最小距离，因此会被选中。如果 B 被剔除，则选中 C，随后是字体 B、A，最后是 E。
  
  与上一个示例类似，此处是样式为 "font-weight: 300" 的元素的距离概念图。
  
  正如你所见，由于字体 B 包含了整个字体族中的最小距离，该算法会选择字体 B。然而，如果字体 B 被从该族中剔除，字体 A 将拥有族内最小距离，因此会被选中。如果 A 被剔除，则选中 C。
  
  通过此过程确定最接近的匹配字重后，将不包含该已确定字重的字型从匹配集中移除。
  
  注意：[CSS-FONTS-3] 与本规范在 font-weight 属性的动画行为上存在细微差异。先前，插值的 font-weight 值会被舍入到最接近的 100 的倍数，并在这些舍入后的值上运行字体匹配算法。在本规范中，字体匹配算法能够接受任何值，因此不会发生舍入。这种细微的行为差异归因于字体匹配算法的不连续性。
4. font-size 必须在用户代理相关的公差范围内进行匹配。（通常，可缩放字体的尺寸舍入到最接近的整个像素，而位图字体的公差可能高达 20%。）进一步的计算，例如其他属性中的 em 值，是基于所使用的 font-size 值，而非指定的那个值。
注意，执行上述步骤后，匹配集中可能仍存有不止一种字体。如果是这样，用户代理必须从匹配集中选择单一字体，并以此继续执行后续步骤。不同用户代理和不同操作系统平台之间对字体的选择可能有所不同；但在同一文档的两个元素之间，选择必须保持一致。
如果匹配的字型是通过 @font-face 规则定义的，用户代理必须使用下述程序来选择单一字体。
1. 如果字体资源尚未加载，且 unicode-range 描述符值定义的字符范围包含目标字符，则加载该字体。
2. 下载完成后，如果有效字符映射支持目标字符，则选择该字体。
当匹配的字型是复合字型时，用户代理必须按照 @font-face 规则定义的相反顺序，对复合字型中的每一个字型使用上述程序。

在下载期间，用户代理必须等待字体下载完成，或者使用替代字体指标渲染一次，并在字体下载完成后再次渲染。
如果没有匹配的字型，或者匹配的字型不包含要渲染字符的字形，则选择下一个字体族名并重复前三个步骤。族内其他字型中的字形不会被考虑。唯一的例外是，如果 font-synthesis 属性的值允许，用户代理可选择性地使用默认字型的合成倾斜版本，前提是该字型支持目标字形。例如，如果斜体字型不支持阿拉伯文字形，则可以使用常规字型的合成斜体版本。
如果没有更多的字体族可评估，且未找到匹配的字型，则用户代理执行已安装字体回退程序，以查找目标字符的最佳匹配。此程序的结果在不同用户代理之间可能有所不同。
如果无法使用任何字体显示特定字符，用户代理应通过某种方式指示该字符未显示，要么显示缺失字形的符号表示（例如使用 Last Resort Font），要么使用默认字体中的缺失字符字形。

允许对此过程进行优化，前提是实现行为表现得如同完全遵循了该算法一样。匹配按明确定义的顺序进行，以确保在给定相同可用字体集和渲染技术的情况下，不同用户代理之间的结果尽可能一致。

首次可用字体（例如用于字体相对长度（如 ex）或 line-height 属性的定义中）被定义为第一个在 font-family 列表中字符 U+0020（空格）未被 unicode-range 排除的字体（若均不可用，则为用户代理的默认字体）。

通过族名直接引用的已安装字体（而非通过 @font-face 规则）被视为拥有覆盖整个 Unicode 代码空间的 unicode-range。

测试

注意：该字体是否实际具有空格字符的字形并不重要。

5.3. 簇匹配（Cluster matching）

当文本包含组合标记等字符时，理想情况下基字符应使用与标记相同的字体进行渲染，这能确保标记的正确放置。因此，簇的字体匹配算法比单独匹配单个字符的一般情况更为专业。对于包含变体选择符（指示特定字符所用精确字形的序列），用户代理在尝试使用基字符的默认字形前，总是尝试已安装字体回退以查找合适的字形。

包含组合标记或其他修饰符的码点序列被称为字素簇（参见 [CSS3TEXT] 和 [UAX29] 以获取更完整的描述）。对于给定的包含基字符 b 和一系列组合字符 c1, c2… 的簇，整个簇使用以下步骤进行匹配：

对于字体列表中的每个字体族，使用上一节定义的样式选择规则选择一个字型。
1. 如果序列 b + c1 + c2 … 中的所有字符都被该字体完全支持，则为该序列选择此字体。
2. 如果多个码点的序列在规范上等同于单个字符，且字体支持该字符，则为该序列选择此字体，并对整个簇使用与该规范等价字符关联的字形。
如果步骤 1 中在字体列表中未找到字体
1. 如果 c1 是变体选择符，必须使用系统回退来查找支持 b + c1 完整序列的字体。如果系统上没有字体支持该完整序列，则使用匹配单个字符的常规程序匹配单个字符 b，并忽略该变体选择符。注意：包含多于一个变体选择符的序列必须被视为编码错误，且后续的选择符必须被忽略。[UNICODE]
2. 否则，用户代理可选择性地使用已安装字体回退来匹配一个支持整个簇的字体。
如果在步骤 2 中未找到字体，则使用步骤 1 中的匹配序列来确定被字体列表中的字体完全支持的最长序列，并尝试使用匹配单个字符的规则单独匹配剩余的组合字符。

5.4. 字符处理问题

CSS 字体匹配总是在包含 Unicode 字符的文本运行上执行 [UNICODE]，因此使用传统编码的文档在进行字体匹配前会被视为已进行转码。对于同时包含传统编码和 Unicode 字符映射的字体，传统编码字符映射的内容对字体匹配过程的结果不得有任何影响。

字体匹配过程不假设文本运行处于规范化或非规范化形式（详见 [CHARMOD-NORM]）。字体可能仅支持预组合形式，而不支持基字符加组合标记的分解序列。作者应始终根据内容来定制其字体选择，包括内容是否包含规范化或非规范化的字符流。

如果给定字符是私有使用区（PUA）Unicode 码点，用户代理必须仅匹配 font-family 列表中命名的非通用字体族。如果 font-family 列表中命名的任何字体族都不包含该码点的字形，用户代理必须为该字符显示某种形式的缺失字形符号，而不是尝试对该码点执行已安装字体回退。在匹配替换字符 U+FFFD 时，用户代理可跳过字体匹配过程并立即显示某种缺失字形符号，无需显示本应通过字体匹配过程选择的字体中的字形。

通常，特定字体族的所有字体将具有相同或相似的字符映射。此处概述的过程旨在处理即使是包含具有广泛变异字符映射字型的字体族。然而，提醒作者使用此类字体族可能会导致意外结果。

测试

6. 字体特性属性

现代字体技术支持各种先进的排版和语言特定的字体特性。利用这些特性，单个字体可以为广泛的连字、上下文和样式替代、表格数字和旧式数字、小型大写字母、自动分数、花体以及特定于给定语言的替代提供字形。为了让作者能够控制这些字体功能，font-variant 属性已得到扩展。它现在作为一个简写属性，用于控制一组提供对样式字体特性进行控制的属性。

6.1. 字形选择与定位

本节为非规范性内容

用于显示拉丁文本的简单字体使用非常基础的处理模型。字体包含一个将每个字符映射到该字符字形的字符映射。后续字符的字形简单地沿着文本运行逐个放置。现代字体格式（如 OpenType 和 AAT/Apple Advanced Typography）使用更丰富的处理模型。给定字符的字形不仅可以基于字符本身的码点来选择和定位，还可以基于相邻字符以及为文本启用的语言、书写系统和特性来选择和定位。字体特性可能对特定书写系统是必需的，或者作为默认启用，又或者是作者控制下的样式特性。字体选择和定位在整个文本处理操作顺序（如文本转换、文本方向和文本对齐）中发生的位置在 CSS Text 3 § A 文本处理操作顺序中有描述。

有关 OpenType 字体字形处理的详细描述，请参见 [WINDOWS-GLYPH-PROC]。

样式字体特性可分为两大类：影响字形形状与周围上下文协调的特性（如字距调整和连字特性），以及影响形状选择的特性（如小型大写字母、下标/上标和替代特性）。

下面列出的 font-variant 的子属性用于控制这些样式字体特性。它们不控制显示某些书写系统所需的特性（如显示阿拉伯语或印度语文本时使用的 OpenType 特性）。它们影响字形的选择和定位，但不影响字体匹配部分中所述的字体选择（除非是与 CSS 2.1 兼容所必需的情况）。

为了确保跨用户代理的行为一致性，列出了单个属性的等效 OpenType 属性设置，且这些设置是规范性的。当使用其他字体格式时，应将这些作为将 CSS 字体特性属性值映射到特定字体特性的指南。

6.2. 语言特定的显示

OpenType 也支持语言特定的字形选择和定位，以便在语言决定特定显示行为的情况下能够正确显示文本。许多语言共享同一个书写系统，但某些字母的形状在这些语言中可能有所不同。例如，某些西里尔字母在俄语文本中的形状与在保加利亚语中不同。在拉丁文本中，通常使用显式的“fi”连字（“i”上缺少圆点）来渲染“fi”。然而，在同时使用带点“i”和无点“i”的语言（如土耳其语）中，不使用这种连字或使用包含圆点的专业化版本非常重要。

测试

language-specific-01.html (视觉测试) (源码)

下面的示例展示了基于西班牙语、意大利语和法语正字法中发现的样式传统的语言特定变体。

如果元素的语言根据文档语言规则已知，用户代理必须从内容语言推断 OpenType 语言系统，并在使用 OpenType 字体选择和定位字形时使用该系统。如果已明确指定书写系统，它必须优先于内容语言所暗示的习惯书写系统。

对于 OpenType 字体，在某些情况下可能需要显式声明要使用的 OpenType 语言，例如当显示使用另一种语言的排版惯例的给定语言的文本时，或者当字体没有明确支持给定语言但支持共享常见排版惯例的语言时。font-language-override 属性即用于此目的。

6.3. 字距调整（Kerning）：font-kerning 属性

名称	font-kerning
值	auto \| normal \| none
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

字距调整（Kerning）是字形间距的上下文调整。此属性控制度量字距调整，即利用字体中包含的调整数据的字距调整。

auto: 指定由用户代理自行决定是否应用字距调整。
normal: 指定应用字距调整。
none（无）: 指定不应用字距调整。

对于不包含字距调整数据的字体，此属性将没有可见效果。在使用 OpenType 字体进行渲染时，[OPENTYPE] 规范建议默认启用字距调整。当启用字距调整时，相关的 OpenType 字距调整特性会被启用（对于水平排版模式和垂直排版模式中的横向排版，使用 kern 特性；对于垂直排版模式中的直立排版，使用 vkrn 特性）。用户代理还必须支持仅通过 kern 字体表中包含的数据支持字距调整的字体，如 OpenType 规范中所述。如果定义了 letter-spacing 属性，字距调整会被视为默认间距的一部分，而字母间距调整是在字距调整应用之后进行的。

当设置为 auto 时，用户代理可以基于多个因素（文本大小、书写系统或其他影响文本处理速度的因素）来决定是否应用字距调整。希望获得正确字距调整的作者应使用 normal 来明确启用字距调整。同样，一些作者可能更倾向于在性能比精确外观更重要的情况下禁用字距调整。然而，在设计良好的现代实现中，使用字距调整通常对文本渲染速度没有太大影响。

6.4. 连字（Ligatures）：font-variant-ligatures 属性

名称	font-variant-ligatures
值	normal \| none \| [ `<common-lig-values>` \|\| `<discretionary-lig-values>` \|\| `<historical-lig-values>` \|\| `<contextual-alt-values>` ]
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

连字和上下文形式是结合字形以产生更协调形式的方法。

<common-lig-values>        = [ common-ligatures | no-common-ligatures ]

<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]

<historical-lig-values>    = [ historical-ligatures | no-historical-ligatures ]

<contextual-alt-values>    = [ contextual | no-contextual ]

各个值具有以下含义：

normal: normal 的值指定启用了常见的默认特性，详见下一节。对于 OpenType 字体，通用连字和上下文形式默认开启，而自由选择（discretionary）和历史（historical）连字则不开启。
none（无）: 指定此属性涵盖的所有类型的连字和上下文形式均被显式禁用。在认为不需要连字的情况下，这可能会提高文本渲染速度。
common-ligatures: 启用通用连字的显示（OpenType 特性：liga, clig）。对于 OpenType 字体，通用连字默认启用。
no-common-ligatures: 禁用通用连字的显示（OpenType 特性：liga, clig）。
discretionary-ligatures: 启用自由选择连字的显示（OpenType 特性：dlig）。哪些连字属于自由选择或可选的由字体设计师决定，因此作者需要参考给定字体的文档，以了解哪些连字被认为是自由选择的。
no-discretionary-ligatures: 禁用自由选择连字的显示（OpenType 特性：dlig）。
historical-ligatures: 启用历史连字的显示（OpenType 特性：hlig）。
no-historical-ligatures: 禁用历史连字的显示（OpenType 特性：hlig）。
contextual: 启用上下文替代（contextual alternates）的显示（OpenType 特性：calt）。虽然严格来说不是一种连字特性，但与连字一样，此特性通常用于使字形形状与周围上下文协调。对于 OpenType 字体，此特性默认开启。
no-contextual: 禁用上下文替代的显示（OpenType 特性：calt）。

必需的连字（正确渲染复杂书写系统所必需）不受上述设置的影响，包括 none（OpenType 特性：rlig）。

6.5. 下标和上标形式：font-variant-position 属性

名称	font-variant-position
值	normal \| sub \| super
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性用于启用排版下标和上标字形。它们是设计在与默认字形相同的 em-box 内的替代字形，旨在与默认字形位于同一基线上，无需重新调整大小或基线重定位。它们被明确设计用于匹配周围文本，并提高可读性，同时不影响行高。

comparison between real subscript glyphs and synthesized ones

下标字形（上）与典型的合成下标（下）

各个值具有以下含义：

normal: 未启用以下列出的任何特性。
sub (下标): 启用下标变体的显示（OpenType 特性：subs）。
super (上标): 启用上标变体的显示（OpenType 特性：sups）。

由于下标和上标的语义性质，当给定连续文本运行的值为 sub 或 super 时，如果运行中的所有字符都没有变体字形可用，则应为所有字符合成模拟字形，使用不应用此特性时会使用的字形的缩减形式。这是按运行进行的，以避免变体字形和合成字形混合导致对齐不正确。在缺少给定字符下标或上标字形的 OpenType 字体情况下，用户代理必须合成适当的下标和上标字形。

alternate superscripts vs. glyphs synthesized using superscript metrics

上标替代字形（左）、合成上标字形（中）和不正确的两者混合（右）

在文本装饰仅应用于包含上标或下标字形的文本运行的情况下，可以使用合成字形，以避免装饰位置出现问题。

过去，用户代理曾使用 font-size 和 vertical-align 来模拟 sub 和 sup 元素的下标和上标。为了提供一种向后兼容的方式定义下标和上标，建议作者使用条件规则 [CSS3-CONDITIONAL]，以便旧版用户代理仍通过旧机制渲染下标和上标。

因为 font-size: smaller 常用于这些元素，所以应用于下标和上标文本的有效缩放因子会根据大小而变化。对于较大文本，字体大小通常减小三分之一，但对于较小文本尺寸，减小幅度可能会小得多。这使得下标和上标即使在元素使用小文本尺寸时也能保持可读性。用户代理在决定如何合成下标和上标字形时应考虑这一点。

OpenType 字体格式在 OS/2 表格 [OPENTYPE] 中定义了下标和上标指标，但这些在实践中并不总是准确的，因此在合成下标和上标字形时不能依赖它们。

作者应注意，字体通常仅提供该字体支持的字符子集的下标和上标字形。例如，虽然下标和上标字形通常可用于拉丁数字，但标点符号和字母字符的字形则较少提供。为此属性定义的合成回退规则试图确保下标和上标始终出现，但如果使用的字体没有为包含在下标或上标中的所有字符提供适当的替代字形，其外观可能不符合作者的预期。

此属性不具有累积性。将其应用于下标或上标内的元素不会嵌套下标或上标字形的放置。当此属性的值为 sub 或 super 时，文本运行中包含的图像的绘制方式将与值为 normal 时完全相同。

由于这些限制，不建议在用户代理样式表中使用 font-variant-position。作者应在下标或上标仅包含指定字体支持的窄范围字符的情况下使用它。

变体字形使用与默认字形相同的基线。沿着基线的放置没有偏移，因此使用变体字形不会影响行内盒（inline box）的高度或改变行盒（linebox）的高度。这使得上标和下标变体非常适合在保持行间距恒定至关重要的情况下使用，例如多列布局。

典型的 sub 元素的用户代理默认样式

sub {
      vertical-align: sub;
      font-size: smaller;
      line-height: normal;
    }

使用 font-variant-position 以一种在旧版用户代理中仍能显示下标的方式指定排版下标

@supports ( font-variant-position: sub ) {
      sub {
        vertical-align: baseline;
        font-size: 100%;
        line-height: inherit;
        font-variant-position: sub;
      }
    }

支持 font-variant-position 属性的用户代理将选择下标变体字形，并在不调整基线或字体大小的情况下渲染它。旧版用户代理将忽略 font-variant-position 属性定义，并使用下标的标准默认设置。

6.6. 大写字母：font-variant-caps 属性

名称	font-variant-caps
值	normal \| small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

该属性允许选择用于小型大写字母（small capitals）、微型大写字母（petite capitals）或标题大写字母（titling capitals）的替代字形。这些字形经过专门设计，能与周围的常规字形良好融合，从而保持文本在简单缩放以适配此目的时容易受损的字重和可读性。

各个值具有以下含义：

normal: 未启用以下列出的任何特性。
small-caps: 启用小型大写字母显示（OpenType 特性：smcp）。小型大写字母字形通常采用大写字母的形式，但缩小为小写字母的大小。
all-small-caps: 对大小写字母同时启用小型大写字母显示（OpenType 特性：c2sc, smcp）。
petite-caps: 启用微型大写字母显示（OpenType 特性：pcap）。
all-petite-caps: 对大小写字母同时启用微型大写字母显示（OpenType 特性：c2pc, pcap）。
unicase: 启用大写字母的小型大写与常规小写字母的混合显示（OpenType 特性：unic）。
titling-caps: 启用标题大写字母显示（OpenType 特性：titl）。大写字母字形通常设计为与小写字母搭配使用。当用于全大写的标题序列中时，它们可能显得过于突兀。标题大写字母是专门为此类情况设计的。

这些字形的可用性取决于字体特性列表中是否定义了给定特性。用户代理可以选择按脚本（per-script）来决定这一点，但明确不应按字符（per-character）来决定。

某些字体可能仅支持此属性描述的部分特性，或者完全不支持。为了与 CSS 2.1 向后兼容，如果指定了 small-caps 或 all-small-caps，但给定字体不支持小型大写字母字形，则用户代理应模拟小型大写字体。例如，通过获取常规字体并将小写字母的字形替换为大写字母字形的缩放版本（对于 all-small-caps 的情况，则替换大小写字母的字形）。

合成与真实的小型大写字母

font-feature-settings 属性也会影响是否使用模拟小型大写字体的决定（与 CSS Fonts 3 不同）。

#example1 { font-variant-caps: small-caps; }
      #example2 { font-variant-caps: small-caps; font-feature-settings: 'smcp' 0; }

对于不支持小型大写字母的字体，#example1 和 #example2 都应以合成的小型大写字母渲染。然而，对于支持小型大写字母的字体，#example1 应以原生小型大写字母渲染，而 #example2 则应在没有任何小型大写字母（原生或合成）的情况下渲染。

为了与周围的文本匹配，字体可能会在启用这些特性时为无大小写区分（caseless）的字符提供替代字形。但在用户代理模拟小型大写字母时，不得尝试为被视为无大小写区分的码位模拟替代字形。

caseless characters with small-caps, all-small-caps enabled

启用小型大写字母、全小型大写字母时的无大小写区分字符

如果为不支持这些特性的字体指定了 petite-caps 或 all-petite-caps，该属性的表现将如同指定了 small-caps 或 all-small-caps 一样。如果为不支持 unicase 特性的字体指定了该值，该属性的表现将如同仅对小写化的大写字母应用了 small-caps 一样。如果为不支持 titling-caps 的字体指定了该值，该属性不会产生视觉效果。当使用模拟的小型大写字母字形时，对于缺乏大小写字母的脚本，small-caps、all-small-caps、petite-caps、all-petite-caps 和 unicase 均无视觉效果。

当使用大小写转换来模拟小型大写字母时，大小写转换必须与 text-transform 属性所使用的转换相匹配。

作为最后手段，常规字体中未缩放的大写字母字形可能会替换小型大写字体中的字形，使文本呈现为全大写字母。

using all-small-caps in acronym-laden text

使用小型大写字母提高含有大量缩写词的文本的可读性

渲染为斜体的引用，第一行应用小型大写字母

blockquote            { font-style: italic; }
    blockquote:first-line { font-variant: small-caps; }

    <blockquote>I'll be honor-bound to slap them like a haddock.</blockquote>

6.7. 数值格式化：font-variant-numeric 属性

名称	font-variant-numeric
值	normal \| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ]
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

指定对数字形式的控制。下面的示例展示了如何结合使用这些值，以影响支持相关特性的字体对表格数据的渲染。在常规段落文本中，使用比例数字，而表格数据则使用等宽数字，以便数字列能正确对齐。

使用数字样式

可能的组合

<numeric-figure-values>   = [ lining-nums | oldstyle-nums ]

<numeric-spacing-values>  = [ proportional-nums | tabular-nums ]

<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]

各个值具有以下含义：

normal: 未启用以下列出的任何特性。
lining-nums: 启用衬线数字（lining numerals）显示（OpenType 特性：lnum）。
oldstyle-nums: 启用老式数字（old-style numerals）显示（OpenType 特性：onum）。
proportional-nums: 启用比例数字（proportional numerals）显示（OpenType 特性：pnum）。
tabular-nums: 启用等宽数字（tabular numerals）显示（OpenType 特性：tnum）。
diagonal-fractions: 启用衬线对角分数显示（OpenType 特性：frac）。
$diagonal fraction example$
stacked-fractions: 启用衬线堆叠分数显示（OpenType 特性：afrc）。
$stacked fraction example$
ordinal: 启用序数数字中使用的字母形式显示（OpenType 特性：ordn）。
slashed-zero: 启用带斜杠的零显示（OpenType 特性：zero）。

对于 ordinal，虽然序数形式通常与上标形式相同，但它们的标记方式不同。

对于上标，变体属性仅应用于包含上标的子元素。

sup { font-variant-position: super; }
x<sup>2</sup>

对于序数，变体属性应用于整个序数，而不是仅仅应用于后缀（或包含段落）。

.ordinal { font-variant-numeric: ordinal; }
<span class="ordinal">17th</span>

在这种情况下，只有“th”会以序数形式出现，数字保持不变。根据特定语言使用的印刷传统，序数形式可能与上标形式不同。例如，在意大利语中，序数形式有时会在设计中包含下划线。

一份简单的西冷牛排腌料配方，使用自动分数和老式数字渲染

.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }

    <h4>Steak marinade:</h4>
    <ul>
      <li><span class="amount">2</span> tbsp olive oil</li>
      <li><span class="amount">1</span> tbsp lemon juice</li>
      <li><span class="amount">1</span> tbsp soy sauce</li>
      <li><span class="amount">1 1/2</span> tbsp dry minced onion</li>
      <li><span class="amount">2 1/2</span> tsp italian seasoning</li>
      <li>Salt &amp; pepper</li>
    </ul>

    <p>Mix the meat with the marinade
    and let it sit covered in the refrigerator
    for a few hours or overnight.</p>

注意，分数特性仅应用于值，而不应用于整个段落。字体通常使用基于斜杠（'/'）字符使用的上下文规则来实现此特性。因此，它不适合用作段落级样式。

6.8. 替代字形和花饰：font-variant-alternates 属性

名称	font-variant-alternates
值	normal \| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ]
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

<font-feature-index> = <integer>

<font-feature-value-name> = <ident>

对于任何给定的字符，字体除了提供该字符的默认字形外，还可以提供各种替代字形。此属性提供了对这些替代字形选择的控制。

对于下面列出的许多属性值，可以使用几种不同的替代字形。有多少替代字形可用以及它们代表什么，是字体特定的，因此在下面的值定义中，它们都被标记为字体特定（font specific）。由于这些替代字形的性质是字体特定的，@font-feature-values 规则用于为特定的字体系列或系列集合定义值，将字体特定的数值 <font-feature-index> 与自定义 <font-feature-value-name> 关联，然后在此属性中用于选择特定的替代字形。

@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }

p {
  font-family: Noble Script;
  font-variant-alternates: swash(flowing); /* use swash alternate #2 */
}

当特定的 <font-feature-value-name> 未针对给定系列或特定特性类型定义时，其计算值必须与已定义时的值相同。然而，在选择字形时，必须忽略包含这些未定义的 <font-feature-value-name> 标识符的属性值。

/* these two style rules are effectively the same */

p { font-variant-alternates: swash(unknown-value); } /* not a defined value, ignored */
p { font-variant-alternates: normal; }

这允许为一组给定的字体系列定义和使用值，但如果发生回退则被忽略，因为字体系列名称会不同。如果给定的值超出了给定字体所支持的范围，则该值会被忽略。这些值永远不适用于通用字体系列。

各个值具有以下含义：

normal: 未启用以下列出的任何特性。
historical-forms: 启用历史形式显示（OpenType 特性：hist）。
stylistic(<font-feature-value-name>): 启用风格替代（stylistic alternates）显示（字体特定，OpenType 特性：salt <font-feature-index>）。
styleset(<font-feature-value-name>#): 启用风格集（stylistic sets）显示（字体特定，OpenType 特性：ss<font-feature-index>，OpenType 目前定义了 ss01 到 ss20）。
character-variant(<font-feature-value-name>#): 启用特定字符变体（character variants）显示（字体特定，OpenType 特性：cv<font-feature-index>，OpenType 目前定义了 cv01 到 cv99）。
swash(<font-feature-value-name>): 启用花饰字形（swash glyphs）显示（字体特定，OpenType 特性：swsh <font-feature-index>, cswh <font-feature-index>）。
ornaments(<font-feature-value-name>): 启用将默认字形替换为装饰字形（如果字体中提供）（字体特定，OpenType 特性：ornm <font-feature-index>）。一些字体可能会提供装饰字形作为大量字符的替代品；然而，将任意字符（例如字母数字）显示为装饰字形是不好的做法，因为它会扭曲数据的语义。鼓励字体设计者将所有装饰字形（除那些明确编码在 Unicode Dingbats 块等中的字形外）编码为项目符号字符（U+2022）的替代字形，以允许作者使用 ornaments() 选择所需的字形。
annotation(<font-feature-value-name>): 启用替代注释形式（annotation forms）显示（字体特定，OpenType 特性：nalt <font-feature-index>）。

6.9. 定义字体特定的替代字形：@font-feature-values 规则

上面列出的 font-variant-alternates 的几个可能值被标记为字体特定；字体不仅可以为特性定义单个字形，还可以定义“多个”可能的字形变体，并将每个变体与一个数字索引关联，以便您选择启用哪一个。

这些数字索引对于每个字面（face）都是特殊的；一种字面上的 swsh 1 特性可能会开启大写 Q 的花饰版本，而在另一种字面上它可能会开启 & 的花饰版本。因此，在 font-feature-settings 中指定索引要求作者“确切地”知道元素将使用哪种字体；如果他们弄错了（由于字体回退选择了不同的字体），他们最终可能会开启一个与他们想要的完全不同且不理想的特性！这也意味着作者无法轻松地为使用不同字体的元素开启类似的特性；他们必须分别为每个元素单独设置不同的 font-feature-settings 值，以使用所需特性的正确数字索引。

为了解决这个问题，@font-feature-values 规则允许作者为每个字面分配一个对人类友好的名称，指向特定的特性索引。使用这些友好的名称，作者可以轻松开启类似的特性，而无需考虑当前使用的字体（如果他们为所有字体定义了该名称），并且确信不会意外开启不相关的特性（因为未为它们定义这些名称的字体将简单地不执行任何操作）。

使用通用命名的值允许作者使用单个样式规则覆盖一组字体，对于这些字体，底层选择器对每种字体来说都是不同的。如果发现下面示例中的任何字体，则将使用带圈的数字字形。

@font-feature-values Otaru Kisa {
  @annotation { circled: 1; black-boxed: 3; }
}
@font-feature-values Taisho Gothic {
  @annotation { boxed: 1; circled: 4; }
}

h3.title {
  /* circled form defined for both fonts */
  font-family: Otaru Kisa, Taisho Gothic;
  font-variant: annotation(circled);
}

使用 @font-feature-values 显式开启任一字体的“带圈”形式，将需要作者“确定无疑地”知道将使用哪种字体；如果他们期望“Otaru Kisa”并编写了 font-feature-settings: "nalt" 1;，它会在 Otara Kisa 中开启“带圈”字符，但如果系统回退到 Taisho Gothic，它反而会开启“方框”字符，因为这就是 Taisho Gothic 与 nalt 1 相关联的内容！

6.9.1. 基本语法

@font-feature-values 规则的序言包含字体系列名称列表，后跟一个包含多个特性值块（feature value blocks）的块，这是一种特殊类型的附属 @ 规则。每个特性值块包含将作者选择的对人类友好的名称（例如“flowing”）映射到相关特性的特性索引的声明。

每个字体特性值与 font-variant-alternates 属性的对应值具有相同的含义。

@font-feature-values = @font-feature-values <font-family-name># { <declaration-rule-list> }

<font-feature-value-type> = <@stylistic> | <@historical-forms> | <@styleset> | <@character-variant>
  | <@swash> | <@ornaments> | <@annotation>

@stylistic = @stylistic { <declaration-list> }
@historical-forms = @historical-forms { <declaration-list> }
@styleset = @styleset { <declaration-list> }
@character-variant = @character-variant { <declaration-list> }
@swash = @swash { <declaration-list> }
@ornaments = @ornaments { <declaration-list> }
@annotation = @annotation { <declaration-list> }

测试

@font-feature-values 序言是一个以逗号分隔的字体系列名称列表，这些名称与 font-family 属性的 <font-family-name> 定义相匹配。这意味着只允许使用已命名的字体系列；在字体系列列表中包含通用或系统字体的规则是语法错误。但是，如果用户代理将通用字体定义为特定的命名字体（例如 Helvetica），则会使用与该系列名称相关联的设置。如果在 <font-family-name> 列表中发生语法错误，则整个 @font-feature-values 规则无效，必须被忽略。

@font-feature-values 块接受 <declaration-rule-list> 作为其内容；这些列表项要么是

由 <font-feature-value-type> @ 关键字标记命名的 @规则

或者

font-display 描述符。

多次指定相同的 <font-feature-value-type> 是有效的；它们的内容会级联在一起。每个特性值块接受一系列声明，即字体特性值声明，其中声明的名称可以是任何 CSS 标识符，且其值必须是一个或多个非负 <integer>。

特性值块接受任何声明名称；根据标准 CSS 语法规则，这些名称必须是 <font-feature-value-name>，并且是区分大小写的（因此 foo: 1; 和 FOO: 2 定义了两个不同的特性）。

@annotation、@ornaments、@stylistic、@swash 中每个声明的值必须匹配 <font-feature-index> 语法，否则声明无效，必须被忽略。

@character-variant 中每个声明的值必须匹配 <font-feature-index [0,99]> <font-feature-index [0,∞]> 语法，否则声明无效，必须被忽略。

@styleset 中每个声明的值必须匹配 <font-feature-index [0,20]>+ 语法，否则声明无效，必须被忽略。

注：每个特性名称仅在单个特性值块内是唯一的。在不同的特性值块之间，或在独立的 @font-feature-values 规则中相同类型的特性值块之间，名称可以重复使用而不会产生冲突。

对于 @font-feature-values 序言中的每个 <font-family-name>，每个字体特性值声明定义了一个（系列名称、特性块名称、声明名称）元组与声明值中一个或多个整数列表之间的映射。如果同一个元组在文档中多次出现（例如在单个块中），则使用最后定义的那个。

例如，以下所有定义都定义了完全相同的字体特性值集合

/* Default */
@font-feature-values foo {
  @swash { pretty: 1; cool: 2; }
}

/* Repeated declaration names */
@font-feature-values foo {
  @swash { pretty: 0; pretty: 1; cool: 2; }
}

/* Multiple blocks of the same type */
@font-feature-values foo {
  @swash { pretty: 1; }
  @swash { cool: 2; }
}

/* Multiple rules for the same family */
@font-feature-values foo {
  @swash { pretty: 1; }
}
@font-feature-values foo {
  @swash { cool: 2; }
}

字体特性值声明中的语法错误会使该声明无效并被忽略，但不会使它所在的字体特性值块无效。在 @font-feature-values 块中的未知 @ 规则（不使用预定义的允许的 @ 关键字列表中的一个）会使该 @ 规则无效并被忽略，但不会使 @font-feature-values 规则无效。

给定语法错误处理后等效的规则

@font-feature-values Bongo {
  @swash { ornate: 1; }
  annotation { boxed: 4; } /* should be @annotation! */
  @swash { double-loops: 1; flowing: -1; } /* negative value */
  @ornaments ; /* incomplete definition */
  @styleset { double-W: 14; sharp-terminals: 16 1 } /* missing ; */
  redrum  /* random editing mistake */
}

上面的示例等同于

@font-feature-values Bongo {
  @swash { ornate: 1; }
  @swash { double-loops: 1; }
  @styleset { double-W: 14; sharp-terminals: 16 1; }
}

如果为给定的系列定义了多个 @font-feature-values 规则，则所得的值定义是这些规则中包含的定义的并集。这允许为给定字体系列定义一套全局的站点范围内的命名值，并在此基础上进行页面的特定添加。

同时使用站点范围和页面特定的特性值

site.css

@font-feature-values Mercury Serif {
  @styleset {
    stacked-g: 3; /* "two-storey" versions of g, a */
    stacked-a: 4;
  }
}

page.css

@font-feature-values Mercury Serif {
  @styleset {
  geometric-m: 7; /* alternate version of m */
  }
}

body {
  font-family: Mercury Serif, serif;

  /* enable both the use of stacked g and alternate m */
  font-variant-alternates: styleset(stacked-g, geometric-m);
}

6.9.2. 多值特性值定义

font-variant-alternates 属性的大多数字体特定功能值都采用单个值（例如 swash()），该值会启用此特性。

@font-feature-values Jupiter Serif {
    @swash {
      swishy: 5;     /* implies ss05 = 1 */
      swirly: 2;     /* implies ss02 = 1 */
    }
  }

character-variant() 属性值和 @character-variant 描述符允许两个值，这会启用一个特性（来自第一个值）并将其设置为给定的（第二个）值。

@font-feature-values MM Greek {
      @character-variant { alpha-2: 1 2; }   /* implies cv01 = 2 */
      @character-variant { beta-3: 2 3; }    /* implies cv02 = 3 */
    }

对于 styleset() 属性值和 @styleset 规则，多个值表示要启用的样式集。1 到 99 之间的值会启用 OpenType 特性 ss01 到 ss99。然而，OpenType 标准官方仅定义了 ss01 到 ss20。对于 OpenType 字体，大于 99 或等于 0 的值在解析时不会产生语法错误，但不启用任何 OpenType 特性。

@font-feature-values Mars Serif {
    @styleset {
      alt-g: 1;        /* implies ss01 = 1 */
      curly-quotes: 3; /* implies ss03 = 1 */
      code: 4 5;       /* implies ss04 = 1, ss05 = 1 */
    }

    @styleset {
      dumb: 125;        /* >99, ignored */
    }

    @swash {
      swishy: 3 5;     /* more than 1 value for swash, syntax error */
    }
  }

  p.codeblock {
    /* implies ss03 = 1, ss04 = 1, ss05 = 1 */
    font-variant-alternates: styleset(curly-quotes, code);
  }

对于 <@character-variant>，1 到 99 之间的单个值表示启用 OpenType 特性 cv01 到 cv99。对于 OpenType 字体，大于 99 或等于 0 的值会被忽略，但解析时不会产生语法错误，且不启用任何 OpenType 特性。当列出两个值时，第一个值表示所使用的特性，第二个值表示为该特性传递的值。如果为一个给定名称分配了超过两个值，则会发生语法错误，并且整个特性值定义将被忽略。

@font-feature-values MM Greek {
    @character-variant { alpha-2: 1 2; }   /* implies cv01 = 2 */
    @character-variant { beta-3: 2 3; }    /* implies cv02 = 3 */
    @character-variant { epsilon: 5 3 6; } /* more than 2 values, syntax error, definition ignored */
    @character-variant { gamma: 12; }      /* implies cv12 = 1 */
    @character-variant { zeta:   20 3; }   /* implies cv20 = 3 */
    @character-variant { zeta-2: 20 2; }   /* implies cv20 = 2 */
    @character-variant { silly: 105; }     /* >99, ignored */
    @character-variant { dumb: 323 3; }    /* >99, ignored */
  }

  #title {
    /* use the third alternate beta, first alternate gamma */
    font-variant-alternates: character-variant(beta-3, gamma);
  }

  p {
    /* zeta-2 follows zeta, implies cv20 = 2  */
    font-variant-alternates: character-variant(zeta, zeta-2);
  }

  .special {
    /* zeta follows zeta-2, implies cv20 = 3  */
    font-variant-alternates: character-variant(zeta-2, zeta);
  }

Matching text on Byzantine seals using character variants

以字符变体显示的拜占庭印章文本

在上图中，红色的文本是使用包含字符变体的字体渲染的，这些变体模仿了公元 8 世纪拜占庭印章上的字符形式。下方两行是使用没有变体的字体显示的相同文本。注意印章中使用的 U 和 N 的两个变体。

@font-feature-values Athena Ruby {
      @character-variant {
        leo-B: 2 1;
        leo-M: 13 3;
        leo-alt-N: 14 1;
        leo-N: 14 2;
        leo-T: 20 1;
        leo-U: 21 2;
        leo-alt-U: 21 4;
      }
    }

    p {
      font-variant: discretionary-ligatures
      character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
    }

    span.alt-N {
      font-variant-alternates: character-variant(leo-alt-N);
    }

    span.alt-U {
      font-variant-alternates: character-variant(leo-alt-U);
    }

    <p>ENO....UP͞RSTU<span class="alt-U">U</span>͞<span class="alt-U">U</span>ΚΑΙTỤẠG̣IUPNS</p>

    <p>LEON|ΚΑΙCONSTA|NTI<span class="alt-N">N</span>OS..|STOIBAṢ.|LIṢROM|AIO<span class="alt-N">N</span></p>

6.10. 东亚文本渲染：font-variant-east-asian 属性

名称	font-variant-east-asian
值	normal \| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ]
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

允许控制东亚文本中的字形替换和尺寸调整。

<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]

<east-asian-width-values>   = [ full-width | proportional-width ]

各个值具有以下含义：

normal: 未启用以下列出的任何特性。
jis78: 启用 JIS78 形式渲染（OpenType 特性：jp78）。
jis83: 启用 JIS83 形式渲染（OpenType 特性：jp83）。
jis90: 启用 JIS90 形式渲染（OpenType 特性：jp90）。
jis04: 启用 JIS2004 形式渲染（OpenType 特性：jp04）。
各种 JIS 变体反映了不同日本国家标准中定义的字形形式。字体通常包含由最新国家标准定义的字形，但有时有必要使用旧的变体，例如为了匹配标牌。
simplified: 启用简化形式渲染（OpenType 特性：smpl）。
traditional: 启用传统形式渲染（OpenType 特性：trad）。
simplified 和 traditional 值允许控制那些随着时间推移被简化，但在某些语境中仍使用旧的、传统形式的字符的字形形式。字符和字形形式的确切集合将根据给定字体设计的语境而有所不同。
full-width: 启用全角（full-width）变体渲染（OpenType 特性：fwid）。
proportional-width: 启用比例间距（proportionally-spaced）变体渲染（OpenType 特性：pwid）。
ruby: 启用注音（ruby）变体字形显示（OpenType 特性：ruby）。由于注音文本通常比相关的正文文本小，字体设计者可以设计用于注音的特殊字形，这些字形比默认字形的缩小版本更具可读性。仅字形选择受到影响，没有任何相关的字体缩放或其他影响行布局的变化。
下方红色的注音文本分别显示为默认字形（顶部）和注音变体字形（底部）。注意笔画粗细的细微差异。

6.11. 字体渲染的总体简写：font-variant 属性

名称	font-variant
值	normal \| none \| [ [ <common-lig-values> \|\| <discretionary-lig-values> \|\| <historical-lig-values> \|\| <contextual-alt-values> ] \|\| [ small-caps \| all-small-caps \| petite-caps \| all-petite-caps \| unicase \| titling-caps ] \|\| [ stylistic(<font-feature-value-name>) \|\| historical-forms \|\| styleset(<font-feature-value-name>#) \|\| character-variant(<font-feature-value-name>#) \|\| swash(<font-feature-value-name>) \|\| ornaments(<font-feature-value-name>) \|\| annotation(<font-feature-value-name>) ] \|\| [ <numeric-figure-values> \|\| <numeric-spacing-values> \|\| <numeric-fraction-values> \|\| ordinal \|\| slashed-zero ] \|\| [ <east-asian-variant-values> \|\| <east-asian-width-values> \|\| ruby ] \|\| [ sub \| super ] \|\| [ text \| emoji \| unicode ] ]
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

font-variant 属性是所有 font-variant 子属性的简写。

font-variant-ligatures
font-variant-position
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
font-variant-emoji

normal 值会将 font-variant 的所有子属性重置为其初始值。none 值会将 font-variant-ligatures 设置为 'font-variant-ligatures/none'，并将所有其他字体特性属性重置为其初始值。与其他简写属性一样，使用 font-variant 会将未指定的 font-variant 子属性重置为其初始值。

它不会重置 font-language-override、font-feature-settings 或 font-variation-settings 的值。

6.12. 低级字体特性设置控制：font-feature-settings 属性

名称	font-feature-settings
值	normal \| <feature-tag-value>#
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	按指定值
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性提供对 OpenType 字体特性的低级控制。它旨在提供对那些未被广泛使用但特定用例所需的字体特性的访问途径。

作者不应使用 font-feature-settings 来设置下表中的任何字体特性。相反，请使用更高级的替代属性，因为

更高级的属性是单独级联的。您可以设置其中一个，而不必设置整个 font-feature-settings 列表
对于不支持该字体特性的字体，可以合成某些更高级的属性。

如果您想设置此字体特性	那么请使用此项来“代替” font-feature-settings	注
字距调整 (`kern`) 或垂直字距调整 (`vkrn`)	font-kerning: normal	font-kerning 属性将根据 writing-mode 设置 `kern` 或 `vkrn` 特性。
标准连字 (`liga`) 或上下文连字 (`clig`)	font-variant-ligatures: common-ligatures
自由连字 (`dlig`)	font-variant-ligatures: discretionary-ligatures
历史连字 (`hlig`)	font-variant-ligatures: historical-ligatures
上下文替代 (`calt`)	font-variant-ligatures: contextual
下标 (`subs`)	font-variant-position: sub
上标 (`sups`)	font-variant-position: super
小型大写字母 (`smcp`)	font-variant-caps: small-caps
来自大写字母的小型大写字母 (`c2sc`)	font-variant-caps: all-small-caps
微型大写字母 (`pcap`)	font-variant-caps: petite-caps
来自大写字母的微型大写字母 (`c2pc`)	font-variant-caps: all-petite-caps
统一大小写 (`unic`)	font-variant-caps: unicase
标题大写字母 (`titl`)	font-variant-caps: titling-caps
衬线数字 (`lnum`)	font-variant-numeric: lining-nums
老式数字 (`onum`)	font-variant-numeric: oldstyle-nums
比例数字 (`pnum`)	font-variant-numeric: proportional-nums
等宽数字 (`tnum`)	font-variant-numeric: tabular-nums
分数 (`frac`)	font-variant-numeric: diagonal-fractions
替代分数 (`afrc`)	font-variant-numeric: stacked-fractions
序数 (`ordn`)	font-variant-numeric: ordinal
带斜杠的零 (`zero`)	font-variant-numeric: slashed-zero
历史形式 (`hist`)	font-variant-alternates: historical-forms
风格替代 (`salt`)	font-variant-alternates: stylistic()	通过创建 @font-feature-values 规则来定义使用哪种替代字形
字符变体 1 - 字符变体 99 (`cv01` - `cv99`)	font-variant-alternates: character-variant()	通过创建 @font-feature-values 规则来定义使用哪种字符变体
花体 (`swsh`) 或上下文花体 (`cswh`)	font-variant-alternates: swash()	通过创建 @font-feature-values 规则来定义使用哪种花体
装饰符 (`ornm`)	font-variant-alternates: ornaments()	通过创建 @font-feature-values 规则来定义使用哪种装饰符
替代注释形式 (`nalt`)	font-variant-alternates: annotation()	通过创建 @font-feature-values 规则来定义使用哪种注释形式
JIS78 形式 (`jp78`)	font-variant-east-asian: jis78
JIS83 形式 (`jp83`)	font-variant-east-asian: jis83
JIS90 形式 (`jp90`)	font-variant-east-asian: jis90
JIS2004 形式 (`jp04`)	font-variant-east-asian: jis04
简化形式 (`smpl`)	font-variant-east-asian: simplified
繁体形式 (`trad`)	font-variant-east-asian: traditional
全角 (`fwid`)	font-variant-east-asian: full-width
比例宽度 (`pwid`)	font-variant-east-asian: proportional-width
Ruby 注释形式 (`ruby`)	font-variant-east-asian: ruby

例如，没有 font-variant 值可以控制科学下标（用于化学公式的小数字）。使用它们可以提高可读性，因此必须通过 font-feature-settings 启用它们

.chem {
  font-feature-settings: 'sinf'
}

scientific inferior numbers in a chemical formula — 科学下标提高了化学公式的可读性

整个属性值是一次性设置的。与 font-variant 属性不同，无法通过添加或删除单个特性来修改继承的值。

normal 的值意味着该属性不会导致字形选择或定位发生任何变化。

特性标签值具有以下语法

<feature-tag-value> = <opentype-tag> [ <integer [0,∞]> | on | off ]?
<opentype-tag> = <string>

<opentype-tag> 是一个区分大小写的 OpenType 特性标签。根据 OpenType 规范 [OPENTYPE]，特性标签包含四个 ASCII 字符。长于或短于四个字符，或包含 U+20–7E 码点范围之外字符的标签字符串是无效的。特性标签只需与字体中定义的特性标签匹配，因此它们不仅限于明确注册的 OpenType 特性。定义自定义特性标签的字体应遵循 OpenType 规范 [OPENTYPE-FEATURES] 中定义的标签命名规则。

字体中不存在的特性标签会被忽略；用户代理不得尝试基于这些特性标签合成回退行为。唯一的例外是，对于那些包含以 kern 表形式存在的字距调整数据，但缺乏 GPOS 表中 kern 特性支持的字体，用户代理可以合成支持 kern 特性。

通常，作者应使用 font-kerning 属性显式启用或禁用字距调整，因为该属性总是会影响具有任一类型字距调整数据的字体。

如果存在，该值表示用于字形选择的索引。<integer> 值必须为 0 或更大。值为 0 表示该特性被禁用。对于布尔型特性，值为 1 可启用该特性。对于非布尔型特性，值为 1 或更大可启用该特性并表示特性选择索引。值 on 与 1 同义，off 与 0 同义。如果省略该值，则假定为 1。

font-feature-settings 的计算值是一个映射，因此指定值中的任何重复项都不能保留。如果同一个特性标签出现多次，则最后一次出现所关联的值将覆盖该轴之前的所有值。

计算值包含去重后的特性标签，并按代码单元升序排序。

font-feature-settings: "sinf" 1;       /* sinf=1 enable Scientific Inferiors */
font-feature-settings: "sinf" on;      /* sinf=1 enable Scientific Inferiors */
font-feature-settings: 'sinf';         /* sinf=1 enable Scientific Inferiors */
font-feature-settings: "sinf" off;     /* sinf=0 disable Scientific Inferiors */
font-feature-settings: "sinf", 'twid'; /* sinf=1, twid=1 enable Scientific Inferiors and Third Widths */
font-feature-settings: "sinf" "twid";  /* invalid, need a comma-delimited list */
font-feature-settings: "silly" off;    /* invalid, tag too long */
font-feature-settings: "PKRN";         /* PKRN=1 enable custom feature */
font-feature-settings: sinf;           /* invalid, tag must be a string */

当指定的值大于字体支持的范围时，其行为是明确未定义的。对于布尔型特性，通常这些会启用该特性。对于非布尔型特性，超出范围的值通常等同于 0 值。然而，在两种情况下，确切行为都取决于字体的设计方式（具体取决于使用哪种查找方式来定义特性）。

实现者可以选择忽略禁用 OpenType 规范中声明为始终必需的特性，例如必需连字 "rlig"。

测试

font-variant-ligatures-11.optional.html (在线测试) (源码)

尽管是专门为 OpenType 特性标签定义的，但将来可能会添加支持字体特性的其他现代字体格式的特性标签。在可能的情况下，为其他字体格式定义的特性应尝试遵循已注册 OpenType 标签的模式。

下面的日语文本将使用半角假名字符进行渲染

body { font-feature-settings: "hwid"; /* Half-width OpenType feature */ }

<p>毎日カレー食べてるのに、飽きない</p>

6.13. 字体语言覆盖：font-language-override 属性

名称	font-language-override
值	normal \| <string>
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不适用
计算值	指定的字符串或关键字 none
规范顺序	按语法
动画类型	离散 (discrete)

测试

通常，作者可以通过设置元素的语言内容来控制特定语言字形替换和定位的使用，如上文所述

<!-- Display text using S'gaw Karen specific features -->

    <p lang="ksw">...</p>

在某些情况下，作者可能需要指定一个不同于语言内容的语言系统，例如由于需要模拟另一种语言的排版传统。font-language-override 属性允许作者显式指定字体的语言系统，覆盖语言内容所隐含的语言系统。

值的含义如下：

normal: 指定当使用 OpenType 字体进行渲染时，使用该元素的内容语言来推断 OpenType 语言系统
<string>: 单个四字符区分大小写的 OpenType 语言系统标签，指定要使用的 OpenType 语言系统，以替代该元素语言所隐含的语言系统。如果字符串少于四个字符，则在末尾填充空格 (U+0020) 字符，使其长度为 4，然后再进行匹配。

未知的 OpenType 语言系统标签会被静默忽略，并且不会影响字形选择和定位。

《世界人权宣言》已被翻译成多种语言。在土耳其语中，该文件的第 9 条可以标记如下

<body lang="tr">
    <h4>Madde 9</h4>
    <p>Hiç kimse keyfi olarak tutuklanamaz, alıkonulanamaz veya sürülemez.</p>

这里，用户代理在渲染文本时使用 lang 属性的值，并恰当地渲染此文本而不使用 'fi' 连字。无需使用 font-language-override 属性。

然而，给定的字体可能缺乏对特定语言的支持。在这种情况下，作者可能需要使用该字体支持的相关语言的排版惯例

<body lang="mk">     <!-- Macedonian lang code -->
    body { font-language-override: "SRB"; /* Serbian OpenType language tag */ }

    <h4>Члeн 9</h4>
    <p>Никoj чoвeк нeмa дa бидe пoдлoжeн нa прoизвoлнo aпсeњe, притвoр или прoгoнувaњe.</p>

由于内容创建者知道所指定的字体支持塞尔维亚语，此处的马其顿语文本将使用塞尔维亚语的排版惯例进行渲染。

7. 字体特性与变体解析

如上一节所述，可以通过多种方式启用字体特性和变体，无论是通过在样式规则或 @font-face 规则内使用 font-variant、font-feature-settings 或 font-variation-settings。这些设置组合的解析顺序定义如下。通过 CSS 属性定义的特性会应用于布局引擎的默认特性之上。

7.1. 默认特性

对于 OpenType 字体，用户代理必须启用 OpenType 文档中为给定脚本和书写模式定义的默认特性。必须默认启用必需连字、通用连字和上下文形式（OpenType 特性：rlig, liga, clig, calt），以及本地化形式（OpenType 特性：locl），以及正确显示复合字符和标记所需的特性（OpenType 特性：ccmp, mark, mkmk）。这些特性必须始终启用，即使 font-variant 和 font-feature-settings 属性的值为 normal 时也是如此。只有在作者明确覆盖时才会禁用个别特性，例如当 font-variant-ligatures 设置为 'font-variant-ligatures/no-common-ligatures' 时。

测试

对于处理复杂脚本，如阿拉伯语、蒙古语或梵文，需要额外的特性。对于垂直文本流中的直立文本，必须启用垂直替代（OpenType 特性：vert）。

7.2. 特性与变体优先级

通用和字体特定的字体特性属性设置按以下顺序解析，优先级升序。此排序用于构建影响给定文本流的综合字体特性列表。

应用默认启用的字体特性，包括给定脚本所需的特性。请参阅 § 7.1 默认特性了解这些特性的描述。
应用由 font-weight、font-width 和 font-style 属性启用的字体变体。

font-style 启用值的应用会受到字体选择的影响，因为此属性可能会选择斜体或倾斜字体。应用的值是由字体匹配算法确定的最接近的匹配值。用户代理必须最多应用一个由 font-style 属性产生的值；"ital" 和 "slnt" 值不能同时设置。

如果所选字体定义在 @font-face 规则中，则在此步骤应用的值应被限制在该 @font-face 规则中 font-weight、font-width 和 font-style 描述符的值范围内。

然后，在此步骤应用的值应（可能再次）被限制在字体所支持的值范围内。
应用 lang/xml:lang 的继承值指定的语言。
如果字体定义通过 @font-face 规则进行，则应用该 @font-face 规则中 font-language-override 描述符所隐含的字体语言覆盖。
如果字体定义通过 @font-face 规则进行，且该 @font-face 规则包含至少一个值不为 'font-named-instance/none' 的有效 font-named-instance 描述符，并且加载的字体资源根据 § 5.1 本地化名称匹配规则包含该名称的命名实例，则应用该命名实例所代表的所有变体值。这些值被限制在字体所支持的值范围内。
如果字体定义通过 @font-face 规则进行，则应用该 @font-face 规则中 font-variation-settings 描述符所隐含的字体变体。
如果字体定义通过 @font-face 规则进行，则应用该 @font-face 规则中 font-feature-settings 描述符所隐含的字体特性。
应用 font-language-override 属性的值所隐含的字体语言覆盖。
应用 font-optical-sizing 属性的值所隐含的字体变体。
应用 font-variant 属性、相关的 font-variant 子属性以及任何其他使用 OpenType 特性的 CSS 属性（例如 font-kerning 属性）所隐含的字体特性。
应用除 font-variant 或 font-feature-settings 之外的属性所确定的特性设置。例如，为 letter-spacing 属性设置非默认值会禁用可选连字。
应用 font-variation-settings 属性的值所隐含的字体变体。这些值应被限制在字体所支持的值范围内。
应用 font-feature-settings 属性的值所隐含的字体特性。

测试

这种排序允许作者为 @font-face 规则中的字体设置一套通用的默认值，然后通过针对特定元素的属性设置来覆盖它们。常规属性设置会覆盖 @font-face 规则中的设置，而底层字体特性设置则会覆盖 font-variant 属性设置。

对于组合的字体特性设置列表中包含同一个特性的多个值的情况，使用最后一个值。当字体缺乏对给定底层字体特性的支持时，文本将仅仅按照该字体特性未启用的方式渲染；不会发生字体回退，并且除了针对特定属性明确定义的情况外，不会尝试合成该特性。

7.3. 特性优先级示例

使用下面的样式，数字在段落中使用时按比例渲染，但在价格表中以表格形式显示

body {
  font-variant-numeric: proportional-nums;
}

table.prices td {
  font-variant-numeric: tabular-nums;
}

@font-face 规则还可以通过在 @font-face 定义的 src 描述符中使用 local() 来访问本地可用字体中的字体特性

@font-face {
  font-family: BodyText;
  src: local("HiraMaruPro-W4");
  font-variant: proportional-width;
  font-feature-settings: "ital"; /* Latin italics within CJK text feature */
}

body { font-family: BodyText, serif; }

如果可用，将使用日文字体 "Hiragino Maru Gothic"。当文本渲染发生时，日文假名将按比例间距显示，拉丁文本将呈斜体。使用回退衬线字体渲染的文本将使用默认渲染属性。

在下面的示例中，可选连字仅为可下载字体启用，但在类为 "special" 的 span 中被禁用

@font-face {
  font-family: main;
  src: url(fonts/ffmeta.woff) format("woff");
  font-variant: discretionary-ligatures;
}

body         { font-family: main, Helvetica; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

假设有人添加了一条使用 font-feature-settings 启用可选连字的规则

body         { font-family: main, Helvetica; }
span         { font-feature-settings: "dlig"; }
span.special { font-variant-ligatures: no-discretionary-ligatures; }

在这种情况下，可选连字将在类为 "special" 的 span 中渲染。这是因为 font-feature-settings 和 font-variant-ligatures 属性都应用于这些 span。尽管 font-variant-ligatures 的 no-discretionary-ligatures 设置有效地禁用了 OpenType "dlig" 特性，但因为 font-feature-settings 是在此之后解析的，所以 "dlig" 值重新启用了可选连字。

8. 字体变体属性

注意：本节中使用的技术名称为“字体变体”（font variations）。这种字体的一个实例称为“可变字体”（variable font）。

8.1. 光学尺寸控制：font-optical-sizing 属性

名称	font-optical-sizing
值	auto \| none
初始值	auto
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

从排版角度来看，在不同尺寸下渲染的文本通常会受益于略有不同的视觉呈现。例如，为了有助于在较小的文本尺寸下阅读，笔画通常较粗，带有较大的衬线。较大的文本通常具有更精致的形态，粗细笔画之间的对比度更大。

auto: 用户代理可以根据 font-size 和屏幕的像素密度来修改字形的形状。对于使用字体变体的 OpenType 和 TrueType 字体，这通常通过使用 "opsz" 字体变体来实现。
none（无）: 用户代理不得为光学尺寸修改字形的形状。

text with different optical sizes, normalized to similar physical sizes — Century Expanded 的每种尺寸均以模拟金属形式存在。这里归一化为相同物理尺寸的不同光学尺寸，具有设计变体以保持风格特征并提高可读性。

在选择 "opsz" 轴的变体值时，必须考虑 font-size，但也可以考虑其他信号。

注意：预计用户代理为 "opsz" 轴提供的值应接近 font-size 的使用值。然而，用户代理可能希望考虑其他因素，如屏幕的像素密度或文本在观察者视网膜上所占的立体角。实验表明，忽略这些其他辅助因素而仅使用 font-size 可能是用户代理选择此值的最佳方式。

像素密度以及文本的视觉尺寸可能会影响为 font-optical-sizing 选择的变体值。当像素密度或文本的视觉尺寸因用户操作或样式变更而改变时，用户代理不得为此变体值选择新值，除非该变更会导致布局变化。用户代理可以自由确定哪些变更会导致布局变化。

注意：一些用户操作（如双指缩放）如果未导致文本重排，则可以视为不会导致布局变化。然而，其他用户操作（如为了无障碍目的增加文本尺寸）则可以视为会导致布局变化，因为它们会导致文本重排。同样，transform 属性可以视为不会导致布局变化，因为变换通常不会导致文本重排。每个用户代理都可以自由决定每种操作是否会导致布局变化。

当字体不直接执行光学尺寸调整时，用户代理不得合成光学尺寸调整。

用户代理不得选择用于渲染文本的字体不支持的 "opsz" 轴值。这可以通过将所选值限制在字体支持的范围内来实现。

font-optical-sizing 与 font-size-adjust 相互作用。在应用光学尺寸调整时，用户代理必须在上述限制条件下，为调整后的字体尺寸应用适当的光学尺寸调整值。

8.2. 底层字体变体设置控制：font-variation-settings 属性

名称	font-variation-settings
值	normal \| [ <opentype-tag> <number> ]#
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	不可用
计算值	关键字 normal 或一个列表，其中每一项都是一个与数字配对的字符串
规范顺序	按语法
动画类型	参见正文

测试

此属性提供对 OpenType 或 TrueType 字体变体的底层控制。它旨在作为一种提供对不广泛使用但特定用例所需的字体变体进行访问的方式。

作者不应使用 font-variation-settings 来设置下表中的任何变体轴。相反，请使用更高级别的替代属性，因为

更高级别的属性会单独级联。您可以设置其中一个，而无需设置整个 font-variation-settings 列表
对于不支持字体变体的字体，可以合成一些更高级别的属性。

如果您想设置此变体轴	那么请使用此选项而不是 font-variation-settings	注
字重 (`wght`)	font-weight	font-weight 属性将在存在 `wght` 轴时设置它。
字宽 (`wdth`)	font-width	font-width 属性将在存在 `wdth` 轴时设置它。
倾斜 (`slnt`) 或斜体 (`ital`)	font-style	font-style 属性将根据其值设置 `slnt` 或 `ital` 轴。
光学尺寸 (`opsz`)	font-optical-sizing	font-optical-sizing 属性将在存在 `opsz` 轴时设置它。

字体变体设置的使用不会影响需要使用回退字体的字体选择，而在该轴上使用字体属性会影响字体选择。

在可能的情况下，作者通常应使用与字体变体相关的其他属性（例如 font-optical-sizing），仅在特殊情况下使用此属性，因为其使用是访问特定不常用字体变体的唯一方法。

例如，最好使用 font-weight: 700，而不是 font-variation-settings: "wght" 700。

normal 的值意味着该属性不会导致字形形状、匹配或定位发生任何变化。

<opentype-tag> 是一个区分大小写的 OpenType 或 TrueType 变体轴名称。根据 OpenType / TrueType 规范，轴名称包含四个 ASCII 字符。长于或短于四个字符，或包含 U+20–7E 码点范围之外字符的轴名称字符串是无效的。轴名称只需与字体中定义的轴标签匹配，因此它们不仅限于明确注册的 OpenType / TrueType 变体轴。定义自定义轴名称的字体应遵循 OpenType 规范中定义的命名规则。

如果字体不支持给定的轴，则其值设置会被忽略，因此不会产生任何影响；用户代理不得尝试基于这些轴标签合成回退行为。同一 CSS font-variation-settings 语句中的其他轴值不会被忽略。

如果字体支持某个变体轴，但其设定值大于或小于预定义的字体范围，它将被限制在字体支持的最接近值。

值可以是分数或负数。

注意：最好通过使用 font-style 属性来获得斜体字形。但是，如果通过 font-variation-settings 直接使用 slnt 轴，请记住它定义为正角表示逆时针倾斜，与 CSS 的方向相反。

如果同一个轴名称出现多次，则最后一次出现所关联的值将覆盖该轴之前的所有值。通过访问该属性的计算值可以观察到这种去重。

计算值包含去重后的轴名称，按代码单元升序排序。

尽管是专门为 OpenType / TrueType 变体定义的，但将来可能会添加支持字体变体的其他现代字体格式的变体轴。在可能的情况下，为其他字体格式定义的变体应尝试遵循已注册变体轴的模式。

可以使用以下机制对 font-variation-settings 进行动画处理。如果两个 font-feature-settings 声明是“相似的”，则可以在它们之间进行动画处理。“相似”的声明是指其中出现相同的属性集（顺序不限）。因为后续重复的属性会覆盖先前的重复属性，所以两个声明即使具有不同数量的属性也可以是“相似的”。如果两个声明是“相似的”，则在声明中对应的值之间成对进行动画处理。否则，无法进行动画处理。在这种情况下，动画的“开始”值在动画期间的某个未指定时间点被交换为“结束”值。

9. 彩色字体支持

彩色字体允许字体文件不仅描述描述字形边缘的轮廓，还描述字形内部存在的颜色。

an example multicolored font — Multicolore，作者 Ivan Filipov

对于某些用途（如 emoji），固定字体中的颜色是合适的。对于其他用途，则需要从样式表中控制所使用的颜色。

测试

font-colorization.html (实时测试) (源文件)

CSS 提供了两种方法来做到这一点。font-palette 属性允许选择字体中包含的多种不同调色板中的一种。@font-palette-values 规则允许覆盖调色板内的一种或多种颜色，甚至允许创建完全不同的调色板。

9.1. 控制彩色字体调色板：font-palette 属性

许多彩色字体文件格式允许对字形内的颜色进行参数化。在这些字体中，描述每个字形的几何图形时，颜色通过索引引用。这些索引在当前活动的调色板中使用字体内部存在的查找表进行解析。然而，许多字体包含多个调色板，每个调色板都包含一组由字体设计师选择的互补颜色，以提供令人愉悦的视觉效果。

此外，一些彩色字体文件格式不仅提供彩色版本，还提供规则的、未着色的字形轮廓。

名称	font-palette
值	normal \| light \| dark \| <palette-identifier> \| <palette-mix()>
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	无
计算值	指定的关键字、标识符或 <palette-mix()> 函数。<palette-mix()> 如果产生的调色板等效，则必须简化为单个关键字或标识符。
规范顺序	按语法
动画类型	按计算值

测试

使用定义如下的 palette-mix() 函数

<palette-mix()> = palette-mix(<color-interpolation-method> , [ [normal | light | dark | <palette-identifier> | <palette-mix()> ] && <percentage [0,100]>? ]#{2})

normal

如果 color-scheme 属性设置为非 normal 的值，用户代理应根据需要选择第一个浅色或深色调色板。否则，用户代理将显示带有默认调色板或默认字形着色的彩色字体。

当彩色字体格式要求使用前景色时，用户代理应考虑 color 属性的计算值

在 COLR [OPENTYPE] 表中，颜色索引 0xFFFF 应根据 color 属性进行渲染。

对于 COLR/CPAL [OPENTYPE] 字体，font-palette: normal 通常意味着使用字体中索引为 0 的调色板来渲染字体。

light

一些彩色字体格式包含标记某些调色板适用于浅色（接近白色）背景的元数据。此关键字会导致用户代理使用字体文件中第一个以此方式标记的可用调色板。如果字体文件格式未考虑此元数据，或者字体中没有以此方式标记的调色板，则此值表现为 normal。

dark

一些彩色字体格式包含标记某些调色板适用于深色（接近黑色）背景的元数据。此关键字会导致用户代理使用字体文件中第一个以此方式标记的可用调色板。如果字体文件格式未考虑此元数据，或者字体中没有以此方式标记的调色板，则此值表现为 normal。

<palette-identifier>

此值标识要使用的 CSS 定义的调色板。用户可以使用 @font-palette-values 规则定义调色板。如果不存在适用的 @font-palette-values 规则，则此值表现为 normal。

<palette-identifier> 被解析为 <dashed-ident>。

注意：这种 CSS 定义的调色板可以是字体中已存在的现有调色板的引用、对字体中已存在的现有调色板的修改，或者是全新的调色板。

<palette-mix()>

此值定义了在由 <palette-identifier> 标识的两个调色板值，或调色板关键字 normal、light、dark，又或是另一个 <palette-mix()> 值之间的插值位置。

字体的字形必须使用一个调色板进行渲染，该调色板是通过对作为参数指定的第一个和第二个调色板的匹配颜色索引进行插值而创建的，必要时需递归解析 <palette-mix()> 函数。

对于每个调色板颜色，其插值遵循 <color-mix()> 函数的规则。

百分比根据 CSS Color 5 § 3.2 百分比标准化进行标准化。

测试

palette-mix-computed.html (在线测试) (源码)

注意：名称“font-palette/light”和“font-palette/dark”描述的是调色板适用的背景，而非调色板本身的颜色。

当暗色模式生效时，使用暗色模式调色板

@media (prefers-color-scheme: dark) {
        .banner {font-palette: dark;
      }
    }

在调色板之间进行动画过渡。

@font-palette-values --pink {
  font-family: Nabla;
  base-palette: 1;
}

@font-palette-values --yellow {
  font-family: Nabla;
  base-palette: 7;
}

@keyframes animate-palette {
  from {
    font-palette: --yellow;
  }
  to {
    font-palette: --pink;
  }
}

p {
  font-family: Nabla;
  animation: animate-palette 1.4s infinite alternate linear;
}

The word Animate animated between a pink and a yellow palette. — Nabla Color，由 typearture.com 提供 - 字体中调色板 1 和 7 之间的动画。

测试

添加更多示例和图片。

9.2. 用户定义的字体颜色调色板：@font-palette-values 规则

@font-palette-values 规则定义了一个颜色调色板，并将该调色板与特定的字体相关联。这使得 Web 作者可以选择任意 <color> 用于颜色字体内部，而不是局限于字体文件中预先存在的调色板。

注意：OpenType CPAL 表仅限于 sRGB 颜色。@font-palette-values 中的 <color> 允许使用任何 CSS 颜色。一些实现目前使用的 API 仅限于 sRGB，因此可能会将指定的颜色映射到 sRGB。这预计是一个暂时的限制。作者不应依赖这种到 sRGB 的映射。

此外，此规则与特定字体的关联使得调色板名称可以针对不同字体应用不同的效果，从而允许在元素中使用多种字体时（即字体回退时）使用相似的颜色。

注意：Web 作者可能希望为单个字体创建多个调色板，以便为他们的 Web 内容创建多种主题。Web 作者也可能希望为多个字体创建匹配的调色板，以在多种字体集合中实现一致的设计。

@font-palette-values 规则代表了字体中使用的一组颜色调色板。调色板由有序的颜色集合组成。使用 @font-palette-values 允许 Web 作者引用字体中现有的调色板，也可以创建填充有作者自定义颜色的调色板。此外，它还允许使用 Web 作者描述的颜色覆盖字体调色板中的一组颜色。

调色板始终是完整的，这意味着不可能描述一个缺失颜色的调色板。如果某些颜色缺失，它们将从由 base-palette 描述符标识的字体内调色板中提取。

数学函数（如 calc()）、var() 和 env() 在 @font-palette-values 规则的描述符值内是有效的。它们在根元素的上下文中进行求值。相对单位也在根元素的上下文中求值。

@font-palette-values 规则由 @font-palette-values @关键字后跟描述符声明块组成。其语法如下

@font-palette-values <dashed-ident> {
  <declaration-list>
}

测试

@font-palette-values 规则接受本规范中定义的描述符。

如果定义了多个名称相同的 @font-palette-values 规则，文档顺序中最后一个生效，前面的规则将被忽略。

修改 Bixa Color 的颜色调色板。

@font-palette-values --Cooler {
  font-family: Bixa;
  base-palette: 1;
  override-colors:
    1 #7EB7E4;
}

overriding a color — Bixa Color，由 Novo Typo 提供。上方为使用字体原有颜色；下方为将橙色修改为蓝色。

修改 Handover Sans 的颜色调色板

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
  override-colors:
    1 rgb(43, 12, 9),
    3 var(--highlight);
}

这些描述符仅在其定义的 @font-palette-values 规则上下文中应用，不适用于文档语言元素。当给定的描述符在同一个 @font-palette-values 规则中出现多次时，仅使用最后一个描述符声明，该描述符的所有先前声明都将被忽略。

每个调色板应用于共享同一个家族名称的每个 @font-face。

我想在绿色调色板中使用两种颜色字体。第一种字体 Bixxxa 已经拥有我可以使用的调色板，但对于 Bungeehee，我需要覆盖一种颜色以获得我的绿色调色板。

@font-face {
  font-family: Bixxxa;
  src: url('./bixxxa.woff') format('woff');
}

@font-face {
  font-family: Bungeehee;
  src: url('./bungeehee.woff') format('woff');
}

@font-palette-values --ToxicGreen {
  font-family: Bixxxa;
  base-palette: 3; /* This is Bixxxa's green palette */
}


@font-palette-values --ToxicGreen {
  font-family: Bungeehee;
  base-palette: 7; /* This is Bungeehee's green palette... */
  override-colors: 2 lime; /* ...except this is pink, which I overwrite to lime */
}

h1 {
  font-family: Bixxxa;
  font-palette: --ToxicGreen;
}

h2 {
  font-family: Bungeehee;
  font-palette: --ToxicGreen;
}

示例由 Roel Nieskens 提供

注意：如果多个物理字体共享一个家族名称（例如使用 unicode-range 创建复合字体），且这些字体具有不同的调色板，则使用 @font-palette-values 指定部分调色板的结果很可能不是作者所期望的。在这种情况下，最好提供完整的调色板定义。

在上面的例子中，由于两个不同的字体家族被设置为具有兼容的命名调色板，我们可以继续编写

h3 {
  font-family: Bixxxa, Bungeehee;
  font-palette: --ToxicGreen;
}

这将正确地在每种字体中应用所需的调色板，即使它们具有不同的调色板编号。

给定的 @font-palette-values 规则集合定义了在包含这些规则的文档中哪些作者定义的调色板可用。

作者定义的字体颜色调色板只能对引用它的文档可用。在引用它的文档之外使用作者定义的颜色调色板将构成安全漏洞，因为一个页面的内容将能够影响其他页面，这是攻击者可能利用的攻击向量。

此 @规则遵循 CSS 的前向兼容解析规则。与声明块中的属性一样，用户代理不支持的任何描述符声明都必须被忽略。@font-palette-values 规则需要一个 font-family 描述符；如果缺失，@font-palette-values 规则无效，必须被完全忽略。

在用户代理平台资源有限、未实现对颜色字体的支持或实现了禁用颜色字体功能的情况下，@font-palette-values 规则必须简单地被忽略；不应更改本规范中定义的单个描述符的行为。

9.2.1. 字体家族：font-family 描述符

名称	font-family
对于	@font-palette-values
值	<font-family-name>#
初始值	不适用

此描述符使用与 § 5 字体匹配算法相同的字体家族列表定义此调色板适用的字体家族。此调色板仅应用于具有这些家族名称的字体。此描述符的值意味着只允许命名字体家族，在字体家族列表中包含通用字体的规则是语法错误。如果字体家族列表中出现语法错误，该描述符必须被忽略（它仍会在 CSS OM 中，但不会匹配任何字体家族）。

9.2.2. 指定基础调色板：base-palette 描述符

名称	base-palette
对于	@font-palette-values
值	light \| dark \| <integer [0,∞]>
初始值	不适用

light: 一些颜色字体格式包含标记某些调色板适用于浅色（接近白色）背景的元数据。此关键字标识字体文件中以此方式标记的第一个可用调色板。如果字体文件格式未考虑此元数据，或者字体中没有调色板以此方式标记，此值表现为 0。
dark: 一些颜色字体格式包含标记某些调色板适用于深色（接近黑色）背景的元数据。此关键字标识字体文件中以此方式标记的第一个可用调色板。如果字体文件格式未考虑此元数据，或者字体中没有调色板以此方式标记，此值表现为 0。
<integer [0,∞]>: 标识字体内的（从零开始的）数值调色板索引。

修改 Banner Flag 的颜色调色板

@font-palette-values --Festival {
  font-family: Banner Flag;
  base-palette: 1;
  override-colors:
    0 rgb(123, 64, 27),
    1 darkblue,
    2 var(--highlight);
}

此描述符指定字体中的一个调色板，包含它的 @font-palette-values 规则将其用作初始值。如果在 @font-palette-values 规则中没有 override-colors 键，那么 @font-palette-values 规则代表字体中索引值与此描述符值相同的调色板。如果在 @font-palette-values 规则中存在 override-colors 键，则该描述符值中的每个项都会覆盖此 @font-palette-values 块所代表的颜色调色板中的单个颜色。

重命名 Handover Sans 的第三个颜色调色板

@font-palette-values --Augusta {
  font-family: Handover Sans;
  base-palette: 3;
}

如果此描述符未出现在 @font-palette-values 中，或者如果字体在 base-palette 的值所对应的索引处不包含调色板，则它的行为就像指定了 0 一样。如果字体不包含任何颜色调色板，则此 @font-palette-values 规则所代表的初始颜色调色板中不包含任何颜色。可以通过在 @font-palette-values 规则中使用 override-colors 描述符来覆盖调色板中的颜色。

9.2.3. 覆盖调色板中的颜色：override-colors 描述符

名称	override-colors
对于	@font-palette-values
值	[ <integer [0,∞]> <color> ]#
初始值	不适用

此描述符覆盖此 @font-palette-values 规则所代表的初始颜色调色板中的颜色。

override-colors 描述符采用逗号分隔的调色板索引条目和颜色列表。逗号分隔列表中的每一项代表一个元组，由调色板中的条目和替换它的颜色组成。

指定的每个 <color> 都必须是一个绝对颜色，否则描述符无效。

对于此描述符值中的每个键/值对，初始调色板中具有该键的颜色（即通过使用 base-palette 描述符）将被此描述符值中指定的颜色覆盖。超出初始调色板索引范围的键将被忽略，但这不会使描述符无效。

override-colors 描述符中的调色板索引条目是一个（从零开始的）调色板索引条目。

整数值从零开始索引。

如果多个不同键/值对的键标识相同的颜色索引（通过名称或整数），则出于渲染目的，使用最后一个键。但是，出于序列化目的，两个键/值对都存在。

注意：这意味着在两个不同的元素上使用具有相同值的 font-palette 可能会导致不同的使用调色板，因为 @font-palette-values 规则内的变量值在这些元素的上下文中可能会有不同的应用方式。

从 CSS 提供的颜色（作为覆盖或作为新条目）可以使用任何支持的颜色空间。

修改 Blaka Ink 的颜色调色板

@font-palette-values --Festival {
  font-family: Blaka Ink;
  base-palette: 0;
  override-colors:
    0 oklch(0.63 0.12 105.7),
    1 color(display-p3 0.23 0.22 0.04),
    2 color(prophoto-rgb 0.37 0.27 0.09);
}

注意：CPAL 表版本 0 和 1 中指定的颜色为 sRGB。

9.3. 选择文本呈现样式：font-variant-emoji 属性

名称	font-variant-emoji
值	normal \| text \| emoji \| unicode
初始值	normal
应用于	所有元素和文本
可继承	是
百分比	无
计算值	指定关键字
规范顺序	按语法
动画类型	离散 (discrete)

测试

此属性允许 Web 作者选择是否为某些 Emoji 代码点使用 Emoji 呈现或文本呈现。传统上，这些呈现样式是通过在某些代码点后面附加变体选择符 15 (U+FE0E) 或变体选择符 16 (U+FE0F) 来选择的。然而，font-variant-emoji 允许 Web 作者设置默认的呈现样式，该样式可以替代变体选择符。

只有 Unicode 列出的、对 Unicode Emoji 呈现序列有贡献的代码点才会受此属性影响。在本 CSS 规范中，这些字符被称为参与 Emoji 呈现的代码点。此属性对任何其他字符无效。

此属性预计会影响字体回退；然而，字体回退与 font-variant-emoji 交互的具体性质未明确指定。尽管如此，变体选择符必须包含在上一簇中，如上述簇匹配部分所定义。此行为的一个自然结果是，变体选择符不得在与前一个字符不同的字体中呈现。因此，它会导致字体回退的行为就像预期的变体选择符（如值描述中所述）一样；然后执行字体回退，包括簇回退规则，该回退必须考虑到这些“附加”变体选择符的呈现偏好。

即使使用 font-variant-emoji，元素内容中存在的变体选择符 15 (U+FE0E) 或变体选择符 16 (U+FE0F) 也会覆盖 font-variant-emoji 中指定的呈现。因此，font-variant-emoji 设置了一个默认呈现，正在呈现的文本可以选择不使用它。

注意：不同的平台对于如何处理 Emoji 呈现序列有不同的惯例。跨平台 UA 可能希望遵循每个独立平台的惯例，也可能希望在所有平台上使用相同的方法。当接到 Emoji 样式呈现的请求时，UA 可能希望忽略不包含颜色表的字体。不同的 UA 可能转而希望使用它对任意簇使用的相同机械簇回退算法。

除 FE0E 变体选择符-15 和 U+FE0F 变体选择符-16 之外的变体选择符不得对字体选择产生任何影响。如果这些变体选择符之一存在，但所选字体不支持，则该变体选择符将被忽略。

当用户代理决定是否为特定字符使用 Emoji 呈现或文本呈现时，不应考虑 BCP47 的 -u- 语言标签扩展（由 lang 或 xml:lang 接受）。

normal: 用户代理可以选择以 Emoji 样式或文本样式绘制参与 Emoji 呈现的代码点。用户代理在执行此决策时通常会遵循平台惯例。
text: 代码点的呈现方式就如同为每个参与 Emoji 呈现的代码点附加了 U+FE0E 变体选择符-15。
emoji: 代码点的呈现方式就如同为每个参与 Emoji 呈现的代码点附加了 U+FE0F 变体选择符-16。
unicode: 代码点的呈现方式依据 [UTS51] 为 Emoji-default、Text-default 或 Text-only，取决于每个参与 Emoji 呈现的代码点的 Emoji 和 Emoji_Presentation 属性值。如果存在，FE0E 变体选择符-15 和 U+FE0F 变体选择符-16 将覆盖单个参与 Emoji 呈现的代码点的默认呈现。

要显示 U+1F6CB COUCH AND LAMP 的 Emoji 形式，让 CustomEmoji.ttf 遵循用户代理对此字符 Emoji 形式的支持概念，并使用以下代码

@font-face {
  font-family: "Custom Emoji";
  src: url("CustomEmoji.ttf") format("truetype");
}
...
<div style="font-family: 'Custom Emoji'; font-variant-emoji: emoji;">&#x1F6CB;</div>

10. 字体分类学

给定的字体可以属于以下一个或多个类别

10.1. 已安装字体

字体可以全局安装在设备上。此类字体通常在任何应用程序中均可访问，即使是在没有 CSS 概念的应用程序中。支持该字体对象的文件存在于用户的设备上，而不是作为远程资源。

已安装字体不得是 Web 字体，Web 字体不得是已安装字体。

10.2. Web 字体

字体可以由远程资源支持，该资源必须使用用户代理的资源获取基础设施进行请求。Web 字体由以下两种机制之一表示

@font-face 规则
Document 的 FontFaceSet 中的一个 FontFace 成员

Web 字体不得在除与 @font-face 规则相关联的或拥有 FontFaceSet 的文档之外的任何其他文档中访问。设备上的其他应用程序不得能够访问 Web 字体。

已安装字体不得是 Web 字体，Web 字体不得是已安装字体。

Web 字体遮蔽已安装字体，因此如果已安装字体与 Web 字体具有相同的家族名称，则已安装字体不可访问。

10.3. 预装字体和用户安装字体

用户可以选择在设备上安装字体。用户安装字体是由用户的显式操作安装的，例如点击“安装”按钮或将文件复制到设备上的特定目录中。此类字体既是用户安装字体，也是已安装字体。Web 内容作者不应依赖用户安装字体的存在，因为无法保证任何用户都会执行安装特定字体的操作。

请参阅字体匹配算法中关于用户安装字体如何与字体匹配算法交互的说明。

任何不是用户安装字体的已安装字体均为预装字体。特定操作系统特定版本的所有用户很可能都安装了相同的一组预装字体。因此，针对这些操作系统的 Web 内容作者可能希望在 font-family 属性中使用这些字体的家族名称。

10.4. 系统字体

系统字体是由 system-ui 通用字体家族名称使用的字体。它是预装字体的一个例子。

额外的字体样式也可以作为 ui-sans-serif、ui-serif、ui-monospace 和 ui-rounded 提供，如果系统提供它们，这些也是预装字体。

测试

11. 字体技术与格式

11.1. 字体技术

features-opentype、features-aat 和 features-graphite 技术是指对字体特性的支持，通常在 [OPENTYPE] 中通过 GSUB 和 GPOS 表实现，以及在 [AAT-FEATURES] 中使用 morx 和 kerx 表实现，并在 [GRAPHITE] 中通过 Silf、Glat 、Gloc 、Feat 和 Sill 表实现（详见 Graphite 表格式）。§ 6 字体特性属性部分描述了与这些功能交互的属性。

variations 技术是指对字体变体的支持，通常在 [OPENTYPE] 中通过 avar、cvar、fvar、gvar、HVAR、MVAR、STAT 和 VVAR 表实现，以及在 [AAT-FEATURES] 中使用 avar、cvar、fvar、gvar 表实现。§ 2 基本字体属性部分以及 § 8 字体变体属性部分描述了与这些功能交互的属性。

color-colrv0、color-colrv1、color-svg、color-sbix 和 color-cbdt 技术是指各种类型的彩色字体文件技术。每一种代表 [OPENTYPE] 或 [AAT-FEATURES] 字体中的一个表（COLR、SVG、sbix 或 CBDT），必须支持这些表才能满足此要求。

palettes 技术是指对字体调色板的支持，通常在 [OPENTYPE] 和 [AAT-FEATURES] 中通过 CPAL 表实现。§ 9 颜色字体支持部分描述了与这些功能交互的属性。

incremental 技术是指客户端对增量字体传输 [IFT] 的支持。

有关背景信息，请参阅 [PFE-report]。

Web 作者可以在 @font-face src 描述符中使用 tech() 函数来表明需要支持以正确渲染字体。此机制可用于在不支持请求的技术时，优雅地回退到辅助字体。

此 @font-face 块展示了如果用户代理支持，如何使用颜色字体，并在不支持时回退到非颜色字体。

@font-face {
  font-family: "Trickster";
  src: url("trickster-COLRv1.otf") format(opentype) tech(color-COLRv1),
  url("trickster-outline.otf") format(opentype);
}

11.2. 字体格式

本规范定义的格式字符串如下。<font-format> 值是以下格式的同义词。

字符串 (String)	字体格式	常见扩展名	常见媒体类型
"collection"	OpenType 集合	.otc,.ttc	font/collection
"embedded-opentype"	嵌入式 OpenType	.eot	application/vnd.ms-fontobject
"opentype"	OpenType	.ttf, .otf	font/otf, font/ttf
"svg"	SVG 字体（已弃用）	.svg, .svgz	image/svg+xml
"truetype"	TrueType	.ttf	font/ttf
"woff"	WOFF 1.0 (Web 开放字体格式)	.woff	font/woff
"woff2"	WOFF 2.0 (Web 开放字体格式)	.woff2	font/woff2

测试

format-specifiers-variations.html (实时测试) (源码)

考虑到 TrueType 和 OpenType 在常见用法中的重叠，格式提示“truetype”和“opentype”必须被视为同义词；“opentype”的格式提示并不暗示字体包含 Postscript CFF 样式的字形数据，也不暗示它包含 OpenType 布局信息（有关此内容的更多背景信息，请参见附录 A）。

12. 对象模型

@font-face 和 @font-feature-values 规则的内容可以通过以下 CSS 对象模型扩展进行访问。

测试

idlharness.html (在线测试) (源码)

12.1. `CSSFontFaceRule` 接口

CSSFontFaceRule 接口表示一个 <@font-face> 规则。

[Exposed=Window]
interface CSSFontFaceDescriptors : CSSStyleDeclaration {
  attribute [LegacyNullToEmptyString] CSSOMString src;
  attribute [LegacyNullToEmptyString] CSSOMString fontFamily;
  attribute [LegacyNullToEmptyString] CSSOMString font-family;
  attribute [LegacyNullToEmptyString] CSSOMString fontStyle;
  attribute [LegacyNullToEmptyString] CSSOMString font-style;
  attribute [LegacyNullToEmptyString] CSSOMString fontWeight;
  attribute [LegacyNullToEmptyString] CSSOMString font-weight;
  attribute [LegacyNullToEmptyString] CSSOMString fontStretch;
  attribute [LegacyNullToEmptyString] CSSOMString font-stretch;
  attribute [LegacyNullToEmptyString] CSSOMString fontWidth;
  attribute [LegacyNullToEmptyString] CSSOMString font-width;
  attribute [LegacyNullToEmptyString] CSSOMString unicodeRange;
  attribute [LegacyNullToEmptyString] CSSOMString unicode-range;
  attribute [LegacyNullToEmptyString] CSSOMString fontFeatureSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-feature-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontVariationSettings;
  attribute [LegacyNullToEmptyString] CSSOMString font-variation-settings;
  attribute [LegacyNullToEmptyString] CSSOMString fontNamedInstance;
  attribute [LegacyNullToEmptyString] CSSOMString font-named-instance;
  attribute [LegacyNullToEmptyString] CSSOMString fontDisplay;
  attribute [LegacyNullToEmptyString] CSSOMString font-display;
  attribute [LegacyNullToEmptyString] CSSOMString fontLanguageOverride;
  attribute [LegacyNullToEmptyString] CSSOMString font-language-override;
  attribute [LegacyNullToEmptyString] CSSOMString ascentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString ascent-override;
  attribute [LegacyNullToEmptyString] CSSOMString descentOverride;
  attribute [LegacyNullToEmptyString] CSSOMString descent-override;
  attribute [LegacyNullToEmptyString] CSSOMString lineGapOverride;
  attribute [LegacyNullToEmptyString] CSSOMString line-gap-override;
};

[Exposed=Window]
interface CSSFontFaceRule : CSSRule {
  [SameObject, PutForwards=cssText] readonly attribute CSSFontFaceDescriptors style;
};

12.2. `CSSFontFeatureValuesRule` 接口

CSSRule 接口扩展如下

partial interface CSSRule {
    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
  };

CSSFontFeatureValuesRule 接口表示一个 @font-feature-values 规则。

[Exposed=Window]
interface CSSFontFeatureValuesRule : CSSRule {
  attribute CSSOMString fontFamily;
  readonly attribute CSSFontFeatureValuesMap annotation;
  readonly attribute CSSFontFeatureValuesMap ornaments;
  readonly attribute CSSFontFeatureValuesMap stylistic;
  readonly attribute CSSFontFeatureValuesMap swash;
  readonly attribute CSSFontFeatureValuesMap characterVariant;
  readonly attribute CSSFontFeatureValuesMap styleset;
  readonly attribute CSSFontFeatureValuesMap historicalForms;
};

[Exposed=Window]
interface CSSFontFeatureValuesMap {
  maplike<CSSOMString, sequence<unsigned long>>;
  undefined set(CSSOMString featureValueName,
    (unsigned long or sequence<unsigned long>) values);
};

fontFamily，类型为 CSSOMString: 定义了特定特性值集合的一个或多个字体家族列表。
value maps，类型为 CSSFontFeatureValuesMap，只读: 与给定 font-variant-alternates 值类型的特性值名称相关联的特性值映射

CSSFontFeatureValuesRule 的每个值映射属性都反映了通过相应的 特性值块 定义的值。因此，annotation 属性包含 @annotation 特性值块 内包含的值，ornaments 属性包含 @ornaments 特性值块 内包含的值，依此类推。

CSSFontFeatureValuesMap 接口使用默认映射类方法，但 set 方法行为不同。它接受一个无符号整数序列，并将其与给定的 featureValueName 相关联。该方法与默认映射类方法的行为相同，但单个无符号长整型值被视为单个值的序列。如果传入无效数量的值，该方法会抛出异常。如果关联的 特性值块 仅允许有限数量的值，则当输入序列包含超过限制的数量时，set 方法会抛出 InvalidAccessError 异常。有关给定类型 特性值块 允许的最大值数量的详细信息，请参阅多值特性值定义的描述。get 方法总是返回一个值序列，即使序列只包含一个值。

12.3. `CSSFontPaletteValuesRule` 接口

[Exposed=Window]
  interface CSSFontPaletteValuesRule : CSSRule {
    readonly attribute CSSOMString name;
    readonly attribute CSSOMString fontFamily;
    readonly attribute CSSOMString basePalette;
    readonly attribute CSSOMString overrideColors;
  };

fontFamily 和 basePalette 接口根据相应的 CSS 属性语法进行解析。

13. 序列化

13.1. 序列化字体相关属性

除非对单个属性另有说明，否则本模块中定义的属性遵循 CSSOM § 6.7.2 序列化 CSS 值的原则。

测试

font-variant-serialization.html (在线测试) (源码)

13.2. 序列化字体相关 @规则

除非对单个描述符另有说明，否则本模块中为 @规则定义的描述符遵循 CSSOM § 6.7.2 序列化 CSS 值的原则。

特别地，遵循更短表示的原则：对于接受值范围的描述符，如果起始值和结束值相同（范围为零），则描述符被序列化为单个值，而不是范围。

测试

at-font-face-descriptors.html (实时测试) (源码)

例如，规则

@font-face {
  font-family: "foo";
  font-weight: 200 200;
}

将序列化为

@font-face {
  font-family: "foo";
  font-weight: 200;
}

此外，遵循仅保留最后定义的值的原则，以及最短表示的原则，多次指定的元组和多个块被序列化为仅包含最后定义值的单个块。

例如，声明

/* Repeated declaration names, and multiple blocks of the same type*/
@font-feature-values foo {
  @swash { pretty: 0; cool: 2; }
  @swash { pretty: 1; }
}

将被序列化为

/* Canonical serialization */
@font-feature-values foo {
  @swash { cool: 2; pretty: 1; }
}

测试

font_feature_values_map_iteration.html (在线测试) (源码)

附录 A：将平台字体属性映射到 CSS 属性

包含此附录是为了为其他部分中描述的一些问题和情况提供背景。它仅供参考。

CSS 中的字体属性旨在与所使用的底层字体格式无关；它们可用于指定位图字体、Type1 字体、SVG 字体，以及常见的 TrueType 和 OpenType 字体。但是，TrueType 和 OpenType 格式的某些方面经常导致作者混淆，并给不同平台上的实现者带来挑战。

TrueType [TRUETYPE] 最初由 Apple 开发，旨在作为一种用于屏幕和打印的轮廓字体格式。Microsoft 加入 Apple 开发 TrueType 格式，此后两个平台都支持 TrueType 字体。TrueType 格式中的字体数据由一组以通用四字母标签名称区分的表组成，每个表包含特定类型的数据。例如，包括版权和许可信息在内的命名信息存储在 name 表中。字符映射 (cmap) 表包含字符编码到字形的映射。Apple 后来添加了用于支持增强排版功能的附加表；这些现在被称为 Apple Advanced Typography 或 AAT 字体。Microsoft 和 Adobe 为高级排版开发了一套独立的表，并将他们的格式称为 OpenType [OPENTYPE]。OpenType 规范在 ISO 标准化为 Open Font Format [OPEN-FONT-FORMAT]。

在许多情况下，Microsoft Windows 或 Linux 下使用的字体数据与 Apple Mac OS X 下使用的数据略有不同，因为 TrueType 格式允许跨平台显式变体。这包括字体度量、名称和字符映射数据。

具体而言，字体家族名称数据的处理在不同平台上有所不同。对于 TrueType 和 OpenType 字体，这些名称包含在 name 表中名称 ID 为 1 的名称记录中。可以为不同的语言环境存储多个名称，但 Microsoft 建议字体始终至少包含一个美国英语版本的名称。在 Windows 上，Microsoft 为了向后兼容，决定将此家族名称限制为最多四个字面；对于更大的分组，可以使用“首选家族”（名称 ID 16）或“WWS 家族”（名称 ID 21）。OSX 等其他平台没有此限制，因此家族名称用于定义所有可能的分组。

其他名称表数据提供了用于唯一标识家族内特定字面的名称。完整字体名称（名称 ID 4）和 Postscript 名称（名称 ID 6）唯一地描述了一个字面。例如，Gill Sans 家族的粗体字面全名为“Gill Sans Bold”，Postscript 名称为“GillSans-Bold”。给定的字面可能有多个本地化版本的全名，但 Postscript 名称始终是由一组有限的 ASCII 字符构成的唯一名称。

在各种平台上，使用不同的名称来搜索字体。例如，使用 Windows GDI CreateIndirectFont API 时，可以使用家族或全名查找字面；而在 Mac OS X 上，CTFontCreateWithName API 调用用于使用全名和 Postscript 名称查找给定的字面。在 Linux 下，fontconfig API 允许使用这些名称中的任何一个搜索字体。在平台 API 自动替换其他字体选择的情况下，可能有必要验证返回的字体是否与给定名称匹配。

给定字面的粗细可以通过 OS/2 表的 usWeightClass 字段确定，或根据样式名称（名称 ID 2）推断。同样，宽度可以通过 OS/2 表的 usWidthClass 确定，或根据样式名称推断。出于与 Windows GDI API 在 200 或更低粗细下的合成加粗相关的历史原因，字体设计师有时会偏离 OS/2 表中的值以避免这些粗细。

渲染使用上下文整形（如泰语、阿拉伯语和梵文）的复杂脚本需要仅在 OpenType 或 AAT 字体中存在的功能。目前，复杂脚本渲染在 Windows 和 Linux 上使用 OpenType 字体特性得到支持，而 OpenType 和 AAT 字体特性在 Mac OS X 下都有使用。

14. 安全考虑

请参阅下面自我审查问卷中的第 9、16 和 17 项。

15. 隐私考虑

遵循自我审查问卷：安全与隐私，并使用 § 10 字体分类学

15.1. 此功能可能向网站或其他方公开哪些信息，以及为何需要这种公开？

本规范允许使用 Web 字体，这些字体按需请求但未安装。在文档或样式表与 Web 字体来源不同的情况下，此网络请求会公开 Referer 标头中的信息，这些信息可能会被字体提供商收集。

除了 Web 字体外，本规范继续允许使用 CSS1 中引入的已安装字体（预装字体和用户安装字体）。

虽然 Web 字体具有跨平台一致性的优势，但已安装字体具有零下载时间的优势。

在某些情况下，特别是对于支持不足或少数语言，已安装字体允许显示无法显示的信息，因为没有支持该语言的可自由许可的 Web 字体，或者因为延迟或下载时间使其使用不可行，特别是对于具有大型字符库的语言，或者在连接缓慢或按流量计费的情况下。

注意：字体匹配算法中可用的已安装字体集合未明确定义。可用的字体集合被追踪器用于对用户进行指纹识别并降低其隐私。然而，某些已安装字体，甚至一些用户安装字体，是使语言可读所必需的。用户代理可能出于语言支持和设计完整性的原因选择使所有已安装字体可用，或者可能出于隐私原因选择使某些字体不可用。此外，用户代理可能具有微调此平衡的附加设施，例如提示用户显式地使某些请求的字体可用或不可用的界面（可能在每个站点基础上）。不同的用户代理，即使在同一个操作系统上运行，预计也会在这里实现不同的平衡。

在执行本地资源渲染的用户代理的情况下（例如 HTML 和 CSS 转 PDF 渲染器，或基于 Web 的文字处理器），访问所有已安装字体（预装字体和用户安装字体）是提供预期功能所必需的。

攻击者可以通过查询已安装字体来获取指纹信息。与较旧的技术（特别是 Adobe Flash，它提供已安装字体的完整列表并将其信息发送到 HTTP 标头中）相比，此类探测必须一次执行一个字体，提供字体家族名称，然后检查（通过脚本，或通过使用 unicode-range 根据用户是否具有支持特定字符的特定名称的字体来选择性地下载 Web 字体）该字体是否已加载。这需要时间，检查超过几百个字体会在页面渲染中引入明显的延迟。

对于 特别注重隐私的环境，选项包括从不下载任何 Web 字体（可能会导致某些字符渲染不正确或根本不渲染），或者始终下载所有 Web 字体，无论是否需要（忽略 unicode-range，并可能在每次查看页面时下载大量未使用的字体）。

15.2. 此规范是否公开了支持该功能所需的最少信息量？

出现的一种共识是，用户代理必须公开预装字体以实现正确的功能，但对于公开用户安装字体尚无共识。本规范允许用户代理在字体匹配算法中忽略用户安装字体。一些现有的用户代理已经这样做。

最少信息量因用户类型而异，并且目前正在辩论中。有一个有用的用户安装字体用户分类学，它已被稍微扩展。

宽松的信息量会暴露可能更多的指纹信息；严格的信息量会减少指纹识别，但也会降低功能，在某些情况下，对于少数语言，会完全破坏这些用户的 Web。

关于是否允许用户进行可配置的、每用户选择加入以公开部分或全部用户安装字体，或者每个来源选择加入的可能性正在讨论中。

关于隐私预算的可能性也已讨论，该预算将惩罚或禁用测试大量字体的恶意网页，但允许测试较少数量的无害页面。

与正常模式相比，一些用户代理在隐私浏览、隐身或抵抗指纹模式下公开更有限的预装字体集。

15.3. 此规范如何处理个人信息或个人可识别信息或由此衍生的信息？

本规范不公开个人信息。

在某些情况下，个人可识别信息可能会被公开。例如，对于日本的某个人，枚举条件启用的日语字体可能不是一个实质性的指纹向量。对于在文本输入菜单中有日语 IME 的欧洲人来说，它们是。

15.4. 此规范如何处理敏感信息？

对已安装字体的指纹识别在某些情况下可能会暴露敏感信息。例如，受迫害的少数群体冒着通过暴露其使用受迫害少数群体语言所需的字体来泄漏敏感信息的风险；无论是通过第三方服务请求 Web 字体，还是暴露与该语言相关的预装字体或用户安装字体。

15.5. 此规范是否为在浏览会话中持续存在的来源引入了新状态？

不。

具体而言，Web 字体必须不能在与 @font-face 规则相关联或拥有 FontFaceSet 的文档之外的任何其他文档中访问。设备上的其他应用程序不得能够访问 Web 字体。这避免了跨来源的信息泄漏。

类似地，字体调色板值只能对引用它的文档可用。在引用它的文档之外使用作者定义的颜色调色板将构成安全漏洞，因为一个页面的内容将能够影响其他页面，这是攻击者可以作为攻击向量利用的事情。

15.6. 此规范向来源公开了来自底层平台的什么信息（例如配置数据）？

system-ui 关键字将操作系统的默认系统 UI 字体暴露给指纹识别机制。

15.7. 此规范是否允许来源访问用户设备上的传感器

不。

15.8. 此规范向来源公开了什么数据？请同时记录哪些数据与在相同或不同上下文中由其他功能公开的数据相同。

对于通过样式表加载的第三方 Web 字体，样式表来源可能会在 Referer 标头中暴露给第三方。此外，仔细配对 unicode-range 和不同的 src URL 允许第三方查看页面上使用的字符，这对大型字符库脚本（如 CJK）来说是一个隐私风险。

对于在 HTML 中预加载的第三方 Web 字体，文档来源可能会以类似方式暴露。

15.9. 此规范是否启用新的脚本执行/加载机制？

不。

具体而言，对于 SVG-in-OpenType 颜色字体，用于字形定义的 SVG 不应包含脚本元素，且出现的任何脚本元素都不会被执行。

15.10. 此规范是否允许来源访问其他设备？

不。

15.11. 此规范是否允许来源在一定程度上控制用户代理的原生 UI？

攻击者可能通过确定操作系统并使用该操作系统适用的原生外观字体来欺骗原生 UI 功能，存在一定风险。

15.12. 此规范可能创建或向 Web 公开什么临时标识符？

无。

15.13. 此规范如何区分第一方和第三方上下文中的行为？

对于字体加载，用户代理必须使用 [HTML] 规范为 @font-face 规则中定义的 URL 定义的潜在 CORS 启用获取方法。获取时，用户代理必须使用“匿名”模式，将引用源设置为样式表的 URL，并将来源设置为包含文档的 URL。

因此，除非作者特别采取措施允许跨来源加载，否则字体通常不会跨来源加载。

15.14. 此规范如何在用户代理的隐私浏览或“隐身”模式的上下文中工作？

该规范不作区分。

一些用户代理在这些模式下可能会公开更受限制的已安装字体集。

15.15. 此规范是否有“安全考虑”和“隐私考虑”部分？

是的。

15.16. 此规范是否允许降低默认安全特性？

不。

15.17. 此问卷应该问什么？

它应该询问恶意负载是否可能导致应用程序崩溃，甚至整个操作系统崩溃，或者甚至导致远程代码执行。

这种可能性确实存在于安装和渲染字体时某些平台上的精心制作的字体，并且这已经在现实中被利用。

实际上，在具有此漏洞的操作系统上运行的用户代理会使用字体清理器来检测此类格式错误或恶意的字体，并防止其被使用。

使用字体来提供文本的视觉渲染通常不应影响可访问性。例如，使用屏幕阅读器将文本渲染为语音的人不会下载字体，也不会受到这些字体本来会包含的内容的影响。

然而，这假设字体字形传达的语义与字符传达的语义相同。

从历史上看，情况并非总是如此。例如，在 Web 初期，通常使用字体（如“Symbol”，尽管也使用过其他字体）使拉丁字母具有希腊字形；虽然这在视觉上有效，但它在屏幕阅读器上不起作用，并且文本也很难搜索或索引，因为映射是特定于字体的。随着 Unicode 的兴起，现在使用希腊字符表示希腊文本，并使字体中的希腊字形映射到希腊字符已成为标准做法。

遗憾的是，但在可避免的情况下，这种做法在设计拙劣的图标字体中依然存在。例如，这种字体可能会在拉丁字母“P”上放置一个“打印机”图标。这种做法将无意义的字母散布在文本中，这对文本搜索和索引产生了负面影响，如果图标字体不加载，渲染效果难以理解，并阻碍了屏幕阅读器。精心设计的字体必须将此类图标分配给具有语义意义的字符。例如，打印机图标可以分配给字符串“printer”或 Unicode 字符 🖨 U+1F5A8 (PRINTER)。

17. 致谢

CSS 工作组谨感谢

Peter Constable 提供的各种语言修复。

Nick Sherman 准备的光学尺寸图片。

Richard Ishida 准备的乌尔都语样本。

Munira Tursunova 和 Dominik Röttsches 开发了字体调色板动画特性。

John Hudson 慷慨地花时间解释了 OpenType 语言标签的微妙之处，并提供了用于在拜占庭印章上显示文本的字符变体用法的示例。

Elika Etemad 为 '@font-feature-values' 规则提供了一些初步的设计思路。

特别感谢 Tab Atkins Jr. 为字体渲染控制部分以及 font-display 描述符部分提供的文本。特别感谢 Ilya Grigorik 和 David Kuettel 在开发这些部分时提供的帮助。

18. 变更

18.1. 2024 年 2 月 1 日工作草案以来的变更

澄清了 <font-feature-value-type> 中描述符值的范围限制（问题 13324）
在生产名称中添加 font- 前缀以避免歧义（问题 13263，PR 13272）
为 <absolute-size> 和 <relative-size> 创建了适当的类型（问题 1794）
定义了如果存在多个 @font-palette-values 规则，最后一个生效（问题 12981）
澄清了固定到变量范围也会影响隐含的变体轴（问题 7999）
对其他 ui-* 通用字体家族添加了一些澄清（问题 3658）
为 system-ui 通用字体族添加说明（PR 12831），（Issue 3658）
清理了字体资源的获取方式（Issue 12261）
明确了 override-colors 中的非绝对颜色会使整个描述符无效，而不仅仅是单个颜色无效（Issue 9555）
为 font-style 描述符添加 left 和 right 值（Issue 9392）
为 font-style 属性添加 left 和 right 值（Issue 9392）
添加 oblique-only 作为 font-synthesis-style 的一个值（Issue 9390）
引用 Cascade 5 来定义 reset-only 子属性，而不是独立定义它（Issue 11904）
明确了如果未指定绝对颜色，则 override-colors 无效（Issue 9555）
修正了“字体特性与变体解析”（Font Feature and Variation Resolution）中的拼写错误
在高棉语示例中使用了更好的字体
添加了 generic(khmer-mul)
使用 unicode-range-token 代替 urange
明确了用户添加/删除字体的要求
使 CSSFontFaceRule.style 与其他 CSS*Rule.style 保持一致
修正了 font 语法，简化了 font-variant-css2 和 font-width-css3 语法
恢复了 monospace 作为通用字体族（之前被意外删除了）
更正了 generic-family 的语法
改进了关于将 PostScript 名称作为字体集合片段标识符的表述
添加了缺失的 @font-face 描述符
对暴露不同描述符或属性集的声明块使用了不同的接口
将增量字体示例更新为最新的 IFT 规范
定义了 CSSFontFeatureValuesRule.historicalForms

18.2. 与 2021年12月21日工作草案的变更

修正了一些失效链接
在字体匹配算法中，区分了 varfont slnt 轴的使用与合成倾斜（synthetic obliquing）
明确了字体变体不计入字体合成
明确了 auto 值在 @font-face 上的作用是选择合适的“正常”值
改进了带变体选择器的 font-variant-emoji 字体回退机制
明确了倾斜角度的符号必须与请求的一致
定义了垂直文本中的合成倾斜
对 override-colors 使用了 CSS Color 5 的绝对颜色定义
将 font-stretch 设为 font-width 的旧版名称别名
palette-mix() 语法要求 color-interpolation-method，因此删除了定义省略该方法时应如何处理的冗余文字
为仿宋（fang song）和楷体（kai）添加了更多通用字体示例
列出了 Urdu（乌尔都语）样本使用的字体
用户必须能够修改用于呈现网页的已安装字体集
添加了使用波斯体（nastaliq）和回退纳斯赫体（naskh）字体的乌尔都语文本示例
明确了 local() 内部的关键字是错误的
明确了 system-ui 通用字体族可能是复合的，并受 Unicode 覆盖范围和内容语言的影响
删除了关于特定排版风格普遍传达正式或俏皮等概念的文化特定主张
为乌尔都语、波斯语和其他语言添加了一个新的 generic(nastaliq) 字体族
为简体中文和繁体中文添加了一个新的 generic(kai) 字体族
不再宣称 cursive 和 kaiti 具有相同的含义
添加了关于 serif 和 sans-serif 通用字体族历史原因的说明
删除了 emoji 通用字体族，因为 font-variant-emoji 属性更好地涵盖了所需的功能
在字体格式表中添加了互联网媒体类型（Internet Media Types）
将已安装字体的影响从“分类学”（Taxonomy）移至“字体匹配算法”
明确了 font-family 和 src 描述符不再是有效性所必需的，因为它们以后可以通过脚本添加。
始终使用 generic(fangsong) 而不是 fangsong 作为通用字体族名称。注意它是脚本特定的。
定义了第三种字体族名称类型 <system-family-name>，它对如何指定有一些限制
在 @font-feature-values 的生成规则中添加了一个缺失的 at-关键字
重构了 @font-feature-values 语法
恢复了一些在将 CSS Fonts 3 移植到本规范时被遗漏的致谢
重新定义了 src 属性的语法，使用 <font-src-list> 生成规则，而不是“见正文”
删除了指向不再存在的参考资料的失效链接
描述了三类通用字体族，包括它们是否是书写系统（脚本）特定的，以及是否总是需要匹配到本地安装的字体
为新的通用字体族添加了一种新的函数表示法 generic()
添加了一个关于平台 API 限制的说明，这些限制可能会将彩色字体呈现限制为 sRGB
删除了关于“强制不使用彩色字形”的遗留且不再适用的提及
完善了 font-palette 的计算值
添加了一个带有动画调色板的 Nabla 字体示例
描述了修改后的 font-palette 语法以及插值和百分比标准化的规则，并引用了 CSS Color 规范
明确了使用的 color-scheme 会影响 font-palette: normal
为倾斜角度和 font-feature-settings 整数添加了缺失的数值范围注释
定义了 <family-name> 的生成规则
对于本地安装的字体，使用了 local(<family-name>)
修正了歧义描述符的自动链接
修正了 <family-name> 生成规则的标记
使用 <opentype-tag> 而非裸字符串定义了特性和变体名称
明确了在 @font-palette-values 描述符中允许使用通用数学函数（不仅仅是 calc）
添加了 font-synthesis-position 属性
在 override-colors 中添加了一个非 sRGB 颜色的示例
在生成规则中使用 rule-list 而非 stylesheet
添加了用于 crossorigin、referrerpolicy 和 integrity 的 URL 请求修饰符
调整了增量技术关键字以匹配最新的增量字体传输（Incremental Font Transfer）规范
对 font-feature-values 使用最后定义的值
font-feature-values 和 font-feature-settings 现在已去重并排序
建议用户代理提示用户使某些用户安装的字体可用或不可用
改进了隐私注意事项，平衡了用户安装字体的隐私与可读性权衡
明确了 font 速记属性，明确使用了显式设置、隐式重置和隐式层叠的术语
明确了零范围描述符的更短表示法
加紧了对“首个可用字体”的定义
将 emoji 添加为 unicode-range 的关键字
允许实现忽略关闭 OpenType 规范要求始终开启的字体特性的请求
为作者提供了关于 font-feature-settings 和 font-variation-settings 的更清晰建议
改进了 font-variant 子属性语法的可读性
对部分示例进行了更正，使其再次与规范匹配
明确了忽略无效 font-family 描述符的含义
允许 @font-palette-values 的 font-family 描述符接收列表
添加了 Web 平台测试覆盖范围
font-palette 和 '@font-palette-values' 不再处于风险中
为 Web 兼容性，允许有限的一组字符串格式说明符
将 feature-* 改为 features-* 以保持一致
将 font-variant-emoji 的初始值从 auto 更改为 normal，以与其他 font-variant-* 属性保持一致
将 font-variant-emoji 的值添加到 font-variant 速记属性中
添加了受 font-variant 速记属性影响的 font-variant-* 属性的规范列表
将“系统字体回退”（system font fallback）重命名为“已安装字体回退”（installed font fallback），以避免与系统字体混淆
更新了属性和描述符值以使用范围符号
修正了一些与规范不匹配的示例
明确了彩色字体默认不启用
为 font-palette:light|dark 添加了更多解释
在 override-colors 中使用键/调色板索引的最后声明
从 override-colors 示例中删除了 currentColor
明确了超出范围的调色板索引会被忽略
杂项拼写更正和标记修复

18.3. 与 2021年7月29日工作草案的变更

明确了调色板中的函数和相对长度是在根元素的上下文中求值的
添加了新章节，关于自 CSS Fonts 3 以来的整体变化
添加了更多 font-palette-values 示例
将 technology 重命名为 tech
在 font-size 中添加了新的 math 值
安全和隐私现在是单独的章节
链接到 OpenType、TrueType 和 Graphite 表定义
更新了使用“supports”的示例
从 src 描述符的格式中删除了旧的“supports”，替换为新的技术生成规则
将 font-technology 和 font-format 移至新章节
形式化了获取和资源计时报告，并应用于字体获取
删除了 override-color 和 base-palette 中的 <string> 值
定义了冲突 override-colors 的正确处理方式
引入了完整调色板的概念
更清晰地描述了 override-colors
消除了 FONT_PALETTE_VALUES_RULE 和 VIEWPORT_RULE 之间的冲突
定义了解析 override-color 颜色的上下文，不再针对每个元素
允许 base-palette 引用深色和浅色调色板
将 CSSFontPaletteValuesRule 中的属性更改为只读
palette-identifier 解析为 dashed-ident 而非 custom-ident，以便于扩展
将 override-color 描述符重命名为 override-colors，因为它接受颜色列表
明确了 base-palette 和 override-color 接收非负整数
更正了 font 速记属性的语法
对 CSSFontPaletteValuesRule 的 IDL 进行了多项更正
从 font-palette 中删除了 “none” 值
明确了增量要求
添加了更多示例
将增量字体技术添加到 supports 中
根据工作组决议，将倾斜字体匹配的临界角从 20 度降至 11 度
允许在 @font-feature-values 中使用 font-display（正文允许但语法不允许）

18.4. 与 2020年11月17日工作草案的变更

添加了 Graphite 参考
添加了字体特性技术关键字 opentype, aat 和 graphite
删除了关于可变字体是新的和实验性的警告性措辞
引言中对 CSS Fonts 3 的引用是信息性的
区分了 COLRv1 和 COLRv0
根据 Unicode 码点明确了设计良好的与设计糟糕的图标字体
添加了无障碍性考虑（Accessibility Considerations）章节
明确了 font-optical-sizing 与 font-size-adjust 的相互作用
对“用户代理”（user agent）使用了统一的大小写
明确了 font-stretch 应序列化为数字/百分比，而不是关键字
建议了加载 optional 字体的启发式方法
明确了语法中的重复项目
用对 Fetch 的引用替换了过时的“可能启用 CORS 的获取”
在 font-synthesis 中添加了缺失的 small-caps 值
明确了哪些属性适用于文本
更新了链接
修正了拼写错误、语法错误

18.5. 与 2019年11月13日工作草案的变更

明确了可以在不使用 JS 的情况下探测字体的 Unicode 支持
明确了 OpenType 特性标签为 4 个字符，末尾以空格填充
添加了字体度量覆盖（font metric override）描述符
添加了默认启用的字体特性链接
与 ebIDL 规范保持一致（undefined，而非 void）
更正了跨域示例，使用 http 而非 https
明确了根据 OpenType，字体范围在 1 到 999 之间
（隐私）添加了关于 unicode-range 隐私利用的提及
明确了 kern 与 vkrn 的使用
添加了字体集合格式，以及字体集合示例
添加了 CBDT 彩色字体
添加了安全与隐私附录
添加了调色板示例，包括深色模式
明确了字体调色板条目的颜色空间
将避免跨站点字体泄露设为 RFC-2119 MUST
明确了彩色字体的单色回退
删除了剩余的对 min-font-size, max-font-size 的引用
明确了颜色名称不区分 ASCII 大小写
将 none 值添加到 font-palette
将 font-palette 和 @font-palette-values 标记为有风险
在所有规范中统一了值定义参考
进一步明确了 optional 的行为
明确了并非所有通用字体族都必须映射到字体
重组了通用字体族引言
添加了一些关于通用字体族的动机说明
添加了关于通用 emoji 字体族和字符支持的说明
明确了 italic 不是 oblique 的回退
添加了关于 x-height 过大的警告
为 font-size-adjust 添加了更好的示例
为 ui-sans-serif 添加了示例
其他编辑改进、拼写修复、失效链接修复和标记改进

18.6. 与 2018年9月20日工作草案的变更

添加了鼓励用户代理也实现标准字体族平台特定名称的说明
添加了 ui-serif, ui-sans-serif, ui-monospace 和 ui-rounded 通用字体族
根据工作组决议移除 font-variant @font-face 描述符
根据工作组决议移除 font-min-size 和 font-max-size
明确 font-style normal 的动画效果为 oblique 0deg
明确为什么为复合字体指定不完整的颜色调色板是个坏主意
在接口上显式添加 [Exposed=Window]
使用正确术语：Unicode 表情符号呈现序列和表情符号呈现参与码点
明确 font-variation-settings 中的每个字符串都与单个数字配对
从 font-variant-numeric 属性定义中移除杂乱的 titling-caps
更好的彩色字体引言
添加基本的多色示例
明确字体变体设置不影响回退字体的字体选择
明确关于 slnt 轴方向的斜体角度
更好地定义 emoji 和 math 通用字体族
添加 font-size: xxx-large
链接到 CSS Values 对 ex 单位的定义
添加 font-feature-settings 的科学下标示例
明确 letter-spacing 会禁用可选连字
将 font-feature-settings 属性从 CSS Fonts 3 移植过来
将 font-variant 速记属性从 CSS Fonts 3 移植过来
将 font-variant-east-asian 属性从 CSS Fonts 3 移植过来
将 font-variant-numeric 属性从 CSS Fonts 3 移植过来
将 font-variant-caps 属性从 CSS Fonts 3 移植过来
将 font-variant-position 属性从 CSS Fonts 3 移植过来
将 font-variant-ligatures 属性从 CSS Fonts 3 移植过来
将 font-kerning 属性从 CSS Fonts 3 移植过来
更新 The CSSFontPaletteValuesRule 接口的 IDL
将字体属性描述符的初始值从 normal 更改为 auto
更新字体匹配部分中 font-stretch 的语法
更新字体样式匹配示例
明确字体调色板的描述
不再宣称 ch 使用首个可用字体
杂项格式和标记修复、链接修复、删除内联已关闭问题
链接到规范引用的最新版本

18.7. 与 2018年4月10日工作草案的变更

添加 unicode 值到 font-variant-emoji
从属性描述中删除媒体条目
为了未来的可扩展性，将 font-synthesis 分解为详细属性
为颜色调色板添加 override-color 描述符
为 font-variant-alternates 定义了 feature-value-name
明确 @font-face src 解析规则
允许使用可变字体的命名实例
附录 A：从 CSS Fonts 3 移植过来的映射平台字体属性到 CSS 属性
从 CSS Fonts 3 移植过来的字符处理问题
从 CSS Fonts 3 移植过来的聚类匹配
为 font-weight, font-style 和 font-stretch 描述符添加新的 auto 值
明确 font-display 描述符值名称
支持命名调色板条目
关于仿宋通用字体族的更多细节
将斜体字体的默认角度更改为 14 度。
从 CSS Fonts 3 移植过来的 font-feature-values
明确未知或不支持的片段标识符的处理
明确字体调色板中的颜色记录是从零开始索引的
统一使用新的通用字体族
编辑清理、澄清示例、标记改进、链接修复、更新到最新参考资料等

18.8. 与 2018年9月20日 CSS Fonts 3 推荐标准的变更

此摘要对比了 CSS Fonts 4 与 CSS Fonts 3 的变更。

添加用于 @font-face 的 font-display 描述符
添加 @font-feature-values 规则
添加字体变体属性，包括 font-optical-sizing 和 font-variation-settings
添加彩色字体支持
为 font-variant-alternates 定义了 feature-value-name
为 font-weight, font-style 和 font-stretch 描述符添加新的 auto 值
添加 ui-serif, ui-sans-serif, ui-monospace 和 ui-rounded 通用字体族
添加 font-size: xxx-large
添加了字体度量覆盖（font metric override）描述符
添加了一些关于通用字体族的动机说明
添加了字体特性技术关键字 opentype, aat 和 graphite
添加 math 值到 font-size

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语相结合来表达。本文档规范性部分中的关键词“MUST”（必须）、“MUST NOT”（不得）、“REQUIRED”（必需）、“SHALL”（应）、“SHALL NOT”（不应）、“SHOULD”（推荐）、“SHOULD NOT”（不推荐）、“RECOMMENDED”（建议）、“MAY”（可以）和“OPTIONAL”（可选）应按照 RFC 2119 中的描述进行解释。然而，为了可读性，这些词在本文档中不以全大写形式出现。

本规范的所有文本均为规范性文本，明确标记为非规范性的部分、示例和注释除外。 [RFC2119]

本规范中的示例均以“例如”开头，或使用 class="example" 与规范性文本隔开，如下所示

提示性说明以“Note”开头，并使用 class="note" 与规范性文本隔开，如下所示

建议（Advisements）是旨在引起特别注意的规范性部分，并使用 <strong class="advisement"> 与其他规范性文本隔开，如下所示： UA 必须提供可访问的替代方案。

一致性类别

如果样式表包含的所有使用本模块定义语法的语句，根据通用 CSS 语法及本模块定义的各功能语法均有效，则该样式表符合本规范。

如果渲染器除了按相应规范解释样式表外，还通过正确解析本规范定义的所有功能并相应地渲染文档来支持这些功能，则该渲染器符合本规范。然而，由于设备限制导致 UA 无法正确渲染文档，并不意味着该 UA 不符合规范。（例如，UA 无需在单色显示器上渲染颜色。）

如果创作工具编写的样式表根据通用 CSS 语法及本模块中各功能的语法是句法正确的，并符合本模块中描述的所有其他样式表一致性要求，则该创作工具符合本规范。

部分实现

为了使作者能够利用前向兼容的解析规则来指定后备值，CSS 渲染器 **必须** 将其无法使用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效（并适当忽略）。特别地，用户代理 **不得** 在单一多值属性声明中选择性地忽略不支持的组件值而保留支持的值：如果任何值被视为无效（因为不支持的值必须如此），CSS 要求忽略整个声明。

不稳定和专有特性的实现

非实验性实现

一旦规范达到候选推荐阶段，非实验性实现即可成为可能，实现者应发布他们能够证明根据规范正确实现的任何 CR 级别特性的无前缀实现。

为建立并保持 CSS 在不同实现间的互操作性，CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前，向 W3C 提交一份实现报告（并在必要时提交用于该实现报告的测试用例）。提交给 W3C 的测试用例需经 CSS 工作组审阅和修正。

CSS 字体模块第 4 级

摘要

关于本文档

1. 简介

1.1. 值定义

2. 基本字体属性

2.1. 字体族：font-family 属性

2.1.1. <font-family-name> 的语法

2.1.2. <generic-font-family> 的语法

2.1.3. <system-font-family-name> 的语法

2.1.4. 字形与字体族之间的关系

2.1.5. 通用字体族

2.2. 字体字重：font-weight 属性

2.2.1. 相对字重

2.2.2. 缺失字重

2.3. 字体宽度：font-width 属性

2.3.1. 字体宽度：font-stretch 旧称别名

2.4. 字体样式：font-style 属性

2.5. 字体大小：font-size 属性

2.5.1. 绝对大小关键字映射表

2.6. 相对大小调整：font-size-adjust 属性

2.7. 简写字体属性：font 属性

2.8. 控制合成字体

2.8.1. 控制合成粗体：font-synthesis-weight 属性

2.8.2. 控制合成斜体：font-synthesis-style 属性

2.8.3. 控制合成小型大写字母：font-synthesis-small-caps 属性

2.8.4. 控制合成上标和下标：font-synthesis-position 属性

2.8.5. 控制合成字体：font-synthesis 速记属性

3. 字体渲染控制

3.1. 字体渲染控制简介

3.2. 字体显示时间线

4. 字体资源

4.1. @font-face 规则

4.2. 字体族：font-family 描述符

4.3. 字体引用：src 描述符

4.3.1. 解析 src 描述符

4.3.2. 加载 src 描述符中的单个项目

4.3.3. 选择 src 中的项目

4.3.3.1. 本地字体后备

4.4. 字体属性描述符：font-style、font-weight 和 font-width 描述符

4.4.1. 字体宽度：font-stretch 旧称别名

4.5. 字符范围：unicode-range 描述符

4.5.1. 使用字符范围定义复合字体

4.6. 字体特征和变体：font-feature-settings 和 font-variation-settings 描述符

4.7. 使用可变字体中的命名实例：font-named-instance 描述符

4.8. 字体请求指南

4.8.1. 字体加载指南

4.8.2. 字体获取要求

4.9. 每个字体面控制字体显示：font-display 描述符

4.9.1. 通过 @font-feature-values 控制每个字体族的字体显示

4.10. 默认字体语言覆盖：font-language-override 描述符

4.11. 默认字体指标覆盖：ascent-override、descent-override 和 line-gap-override 描述符

5. 字体匹配算法

5.1. 本地化名称匹配

5.2. 匹配字体样式

5.3. 簇匹配（Cluster matching）

5.4. 字符处理问题

6. 字体特性属性

6.1. 字形选择与定位

6.2. 语言特定的显示

6.3. 字距调整（Kerning）：font-kerning 属性

6.4. 连字（Ligatures）：font-variant-ligatures 属性

6.5. 下标和上标形式：font-variant-position 属性

6.6. 大写字母：font-variant-caps 属性

6.7. 数值格式化：font-variant-numeric 属性

6.8. 替代字形和花饰：font-variant-alternates 属性

6.9. 定义字体特定的替代字形：@font-feature-values 规则

6.9.1. 基本语法

6.9.2. 多值特性值定义

6.10. 东亚文本渲染：font-variant-east-asian 属性

6.11. 字体渲染的总体简写：font-variant 属性

6.12. 低级字体特性设置控制：font-feature-settings 属性

6.13. 字体语言覆盖：font-language-override 属性

7. 字体特性与变体解析

7.1. 默认特性

7.2. 特性与变体优先级

7.3. 特性优先级示例

8. 字体变体属性

8.1. 光学尺寸控制：font-optical-sizing 属性

8.2. 底层字体变体设置控制：font-variation-settings 属性

12.1. `CSSFontFaceRule` 接口

12.2. `CSSFontFeatureValuesRule` 接口

12.3. `CSSFontPaletteValuesRule` 接口

18.2. 与 2021年12月21日工作草案的变更

18.3. 与 2021年7月29日工作草案的变更

18.4. 与 2020年11月17日工作草案的变更

18.5. 与 2019年11月13日工作草案的变更

18.6. 与 2018年9月20日工作草案的变更

18.7. 与 2018年4月10日工作草案的变更

18.8. 与 2018年9月20日 CSS Fonts 3 推荐标准的变更