CSS 字体模块第 3 级
W3C 推荐标准 2018年9月20日
请检查 勘误表 以查看自发布以来报告的任何错误或问题。
Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
请检查 勘误表 以查看自发布以来报告的任何错误或问题。
Copyright © 2018 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and document use rules apply.
此 CSS3 模块描述了如何指定字体属性以及如何动态加载字体资源。此规范的内容整合了之前分别在 CSS3 字体 和 CSS3 Web 字体 模块中的内容。字体加载事件的描述已移至 CSS 字体加载 模块。
本节描述了本文档在发布时的状态。其他文档可能会取代本文档。在 https://www.w3.org/TR/ 上可以找到当前 W3C 出版物列表和此技术报告的最新修订版。
本文档已经过 W3C 成员、软件开发人员以及其他 W3C 小组和相关方的审查，并获得 W3C 主任作为 W3C 推荐标准的认可。它是一个稳定的文档，可用作参考材料或从其他文档中引用。W3C 在制定推荐标准中的角色是引起对规范的关注并推动其广泛部署。这增强了 Web 的功能性和互操作性。
本文档由根据 W3C 专利政策 运营的小组编制。W3C 维护了与小组交付物相关的任何专利披露的公开列表；该页面还包括披露专利的说明。个人如果知道某项专利且认为该专利包含必要声明，必须按照W3C 专利政策第 6 节的规定披露信息。
本文档受 2018年2月1日 W3C 流程文档 管辖。
字体提供了一种包含字符视觉表示的资源[CHARMOD][UNICODE]。最简单的层面上，它包含将字符代码映射到形状（称为字形）的信息，这些形状代表这些字符。具有相同设计风格的字体通常被分组为字体家族，并根据一组标准字体属性进行分类。在一个家族内，显示给定字符的形状可以因笔画粗细、倾斜度或相对宽度等因素而有所不同。一个单独的字体面由这些属性的独特组合来描述。对于给定的文本范围，CSS 字体属性用于选择字体家族以及该家族内用于渲染该文本的特定字体面。作为一个简单的例子，要使用 Helvetica 的粗体形式，可以使用：
body {
font-family: Helvetica;
font-weight: bold;
}
字体资源可以安装在运行用户代理的系统本地，或者可以下载。对于本地字体资源，可以直接从字体资源中获取描述信息。对于可下载的字体资源（有时称为 web 字体），描述信息包含在对字体资源的引用中。
字体家族通常不包含每种可能的字体属性变体的单一字体面。CSS 字体选择机制描述了如何将一组给定的 CSS 字体属性与单一字体面匹配。
本节为非规范性内容。
排版传统因地域而异，因此没有唯一的方式可以跨语言和文化对所有字体进行分类。即使是常见的拉丁字母，也可能存在广泛的变化：
一个字符，多个字形变体
字形的解剖学差异是一种区分字体的方法。对于拉丁字体，字符主笔画末端的花饰或衬线可以将一种字体与无衬线字体区分开来。在非拉丁字体中，具有渐变笔画的字体和主要使用均匀笔画的字体之间也存在类似的比较：
带衬线和不带衬线的字形
日文字体的类似分组
字体包含字形以及将字符映射到这些字形所需的数据。通常这可能是一个简单的一对一映射，但更复杂的映射也是可能的。使用组合变音符号会为底层字形创建许多变体：
带有变音符号的变体
一系列字符可以通过一个称为连字的单一字形来表示：
连字示例
基于文本上下文的视觉转换通常是欧洲语言中的一种风格选择。对于像[ARABIC-TYPO]这样的语言，它们是正确呈现的必需条件，下面的 lam 和 alef 字符在序列中出现时必须合并：
阿拉伯语必需连字
这些成形转换的相对复杂性需要字体中包含额外的数据。
具有各种风格变体的字体面集合通常被分组为字体家族。在最简单的情况下，常规字体面会辅以粗体和斜体，但可以实现更广泛的分组。字形笔画的厚度（粗细）和字形的整体比例（宽度）是最常见的变体。在下图中，每个字母使用了 Univers 字体家族中的不同字体面。宽度从上到下增加，粗细从左到右增加：
单个字体家族中的粗细和宽度变体
创建支持多种文字的字体是一项艰巨的任务；设计师需要理解不同文字使用排版的文化传统，并设计出在某种程度上共享共同主题的字形。许多语言通常共享相同的文字系统，而这些语言中的每一种可能在风格上存在显著差异。例如，使用波斯语和乌尔都语时，阿拉伯文字系统中的字形表现出显著且系统的差异，而在塞尔维亚语和俄语等语言中使用的西里尔字母也是如此。
字体的字符映射表定义了该字体的字符与字形的映射。如果文档包含字体家族列表中字体字符映射表不支持的字符，用户代理可能会使用系统字体回退程序来找到适当的字体。如果找不到适当的字体，用户代理将呈现某种形式的“缺失字形”字符。当指定的字体家族列表不包含支持给定字符的字体时，系统回退可能会发生。
尽管字体的字符映射表将给定字符映射到该字符的字形，但现代字体技术如 OpenType[OPENTYPE]和 AAT（Apple Advanced Typography）[AAT-FEATURES]提供了基于功能设置将字符映射到不同字形的方法。这些格式中的字体允许将这些功能嵌入到字体本身中，并由应用程序控制。常见的排版功能包括连字、装饰字符、上下文替代、比例和制表数字以及自动分数等。有关 OpenType 功能的视觉概述，请参见[OPENTYPE-FONT-GUIDE]。
用于呈现字符的特定字体面是由应用于给定元素的字体家族和其他字体属性决定的。此结构允许设置独立地变化。
| 名称: | font-family |
| 值: | [ <family-name> | <generic-family> ] # |
| 初始值: | 取决于用户代理 |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
| 可动画: | 否 |
此属性指定字体家族名称或通用家族名称的优先级列表。字体家族定义了一组在粗细、宽度或倾斜度上有所不同的字体面。CSS 使用家族名称与其他样式属性的组合来选择单个字体面。使用这种选择机制，而不是像在设计应用程序中常用的那样通过样式名称选择字体面，在回退发生时允许文本显示的某种规则性。
设计师应注意，CSS 对用于选择的字体属性的定义明确不打算定义字体分类法。字体设计师的家族概念可能通常扩展到沿着除粗细、宽度和倾斜度以外的轴变化的一组字体面。一个家族可能扩展为同时包括一组衬线字体和一组无衬线字体，或者沿着该家族独有的轴变化。CSS 字体选择机制仅提供了一种在需要替换时确定“最接近”替代的方法。
与其他 CSS 属性不同，组件值是以逗号分隔的列表，表示替代项。用户代理会遍历家族名称列表，直到匹配到包含要呈现字符的字形的可用字体为止。这允许跨平台的可用字体的差异以及单个字体支持的字符范围的差异。
字体家族名称仅指定为一组字体面命名的名称，而不是单个字体面。例如，考虑以下字体可用时，Futura 会匹配，但 Futura Medium 不会：
家族名称和单个字体面名称
考虑以下示例：
body {
font-family: Helvetica, Verdana, sans-serif;
}
如果 Helvetica 可用，它将在渲染时使用。如果 Helvetica 和 Verdana 都不存在，则会使用用户代理定义的无衬线字体。
字体家族名称有两种类型：
serif’、‘sans-serif’、‘cursive’、
‘fantasy’ 和 ‘monospace’。这些关键词可以用作当作者的期望字体选择不可用时的通用回退机制。作为关键词，它们不能加引号。建议作者在最后追加一个通用字体家族，以提高稳健性。
通用家族以外的字体家族名称必须以字符串形式引用，或以一个或多个标识符序列的形式不加引号。这意味着大多数标点符号和以数字开头的标记必须在未加引号的字体家族名称中进行转义。
为说明这一点，以下声明是无效的：
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;
如果将标识符序列作为字体家族名称给出，则计算值是通过用单个空格连接序列中的所有标识符将名称转换为字符串。
为了避免转义错误，建议对包含空格、数字或除连字符以外的标点符号的字体家族名称加引号：
body { font-family: "New Century Schoolbook", serif }
<BODY STYLE="font-family: '21st Century', fantasy">
恰好与关键词值（‘inherit’、‘serif’等）相同的字体家族名称必须加引号，以防与同名关键词混淆。用户代理不得将这些关键词视为匹配<family-name>类型的值。这适用于整个 CSS 中的任何关键词。
一组字体如何组合为字体家族的具体方式取决于平台字体管理 API。Windows GDI API 只允许将四个字体面组合到一个家族中，而 DirectWrite API 以及 OSX 和其他平台上的 API 支持具有各种粗细、宽度和倾斜度的字体家族（有关更多详细信息，请参见附录 A）。
某些字体格式允许字体包含家族名称的多种本地化版本。用户代理必须识别并正确匹配所有这些名称，而不受底层平台本地化、使用的系统 API 或文档编码的影响：
本地化家族名称
本地化字体家族名称匹配的详细信息以及相应的大小写敏感性问题在字体匹配部分中描述。
对于所有 CSS 实现，五种通用字体家族必须始终至少匹配一种字体面。然而，这些通用字体可能是复合字体（基于字符的 Unicode 范围、包含元素的语言、用户偏好和系统设置等因素使用不同的字体）。它们也不一定总是彼此不同。
用户代理应提供合理的默认通用字体家族选择，这些选择在基础技术允许的范围内尽可能表达每个家族的特征。鼓励用户代理允许用户选择通用字体的替代选项。
衬线字体代表了一种文字的正式文本样式。这通常意味着但不限于具有结束笔画、外扩或渐细端部或实际衬线结尾（包括板式衬线）的字形。衬线字体通常是按比例间隔的。与‘sans-serif’通用字体家族的字体相比，它们通常在粗细笔画之间表现出更大的变化。CSS 使用术语‘serif’来应用于任何文字的字体，尽管对于特定文字可能更熟悉其他名称，例如明朝体（日本）、宋体（中文）、Batang（韩文）。对于阿拉伯语，由于其排版角色，Naskh
样式更符合‘serif’的要求，而不是其实际设计风格。任何如此描述的字体都可以用来表示通用的‘serif’家族。
衬线字体示例
无衬线字体中的字形，按 CSS 中的定义，通常具有低对比度（垂直和水平笔画的粗细接近相同），笔画的末端是简单的——没有任何外扩、横笔或其他装饰。无衬线字体通常是按比例间隔的。与‘serif’家族的字体相比，它们的粗细笔画之间的变化通常较小。CSS 使用术语‘sans-serif’来应用于任何文字的字体，尽管对于特定文字可能更熟悉其他名称，例如 Gothic（日本）、黑体（中文）或
Gulim（韩文）。任何如此描述的字体都可以用来表示通用的‘sans-serif’家族。
无衬线字体示例
手写体字体中的字形通常使用更随意的书写风格，结果看起来更像手写的钢笔或毛笔字，而不是印刷的字母。CSS 使用术语‘cursive’来应用于任何文字的字体，尽管字体名称中也使用了其他名称，如 Chancery、Brush、Swing 和 Script。
手写体示例
幻想字体主要是装饰性或表现性字体，包含装饰性或表现性字符表示。这些不包括不代表实际字符的 Pi 字体或图片字体。
幻想字体示例
等宽字体的唯一标准是所有字形具有相同的固定宽度。这通常用于呈现计算机代码的示例。
等宽字体示例
| 名称: | font-weight |
| 值: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| 初始值: | normal |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 数值粗细值（见描述） |
| 可动画: | 作为字体粗细 |
‘font-weight’属性指定字体字形的粗细程度、黑度或笔画粗细。
值具有以下含义：
400’相同。700’相同。使用九级以外的比例的字体格式应将其比例映射到 CSS 比例，使得 400 大致对应于标记为 Regular、Book、Roman 的字体面，700 大致匹配标记为 Bold 的字体面。或者可以根据样式名称推断出粗细值，这些名称大致与上述比例相对应。比例是相对的，因此具有较大粗细值的字体面绝不能显得更细。如果使用样式名称推断粗细值，应注意处理跨地区样式名称的差异。
通常情况下，特定字体家族只有少数几种粗细可用。当指定的粗细不存在时，将使用相近的字体面。一般来说，粗体映射到较重的字体面，而细体映射到较轻的字体面（有关精确定义，请参见下面的字体匹配部分）。这里的示例说明了不同粗细使用的字体面，灰色表示该粗细的字体面不存在，因此使用了相近粗细的字体面：
具有 400、700 和 900 粗细的字体家族的粗细映射
具有 300 和 600 粗细的字体家族的粗细映射
尽管这种做法并不被字体设计师们所青睐，但用户代理经常为缺少实际粗体的字体合成粗体。为了样式匹配的目的，这些字体面必须被视为它们确实存在于家族中。作者可以使用‘font-synthesis’属性明确避免这种行为。
‘bolder’和‘lighter’的指定值表示相对于父元素粗细的粗细。计算粗细值是基于继承的‘font-weight’值使用下面的表格进行计算。
| 继承值 | bolder | lighter |
|---|---|---|
| 100 | 400 | 100 |
| 200 | 400 | 100 |
| 300 | 400 | 100 |
| 400 | 700 | 100 |
| 500 | 700 | 100 |
| 600 | 900 | 400 |
| 700 | 900 | 400 |
| 800 | 900 | 700 |
| 900 | 900 | 700 |
上表相当于在给定的字体家族中包含正常和粗体以及极细和重体的情况下，选择下一个相对较粗或较细的字体面。希望对给定元素使用的确切粗细值进行更精细控制的作者可以使用数值而不是相对粗细。
| 名称: | font-stretch |
| 值: | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
| 初始值: | normal |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
| 可动画: | 作为字体宽度动画 |
‘font-stretch’
属性从字体家族中选择正常、压缩或扩展的字体面。绝对关键词值按以下顺序排列，从最窄到最宽：
当给定宽度不存在字体面时，normal 或 condensed 值映射到较窄的字体面，否则映射到较宽的字体面。相反，expanded 值映射到较宽的字体面，否则映射到较窄的字体面。下图显示了九个 font-stretch 属性设置如何影响具有多种宽度的字体家族的字体选择，灰色表示没有该宽度的字体面，因此替代了不同宽度：
具有紧缩、正常和扩展宽度字体面的字体家族的宽度映射
字体宽度的动画：字体宽度按离散步骤插值。插值过程如同有序值是等距的实数。插值结果四舍五入到最接近的值，精确在两个值之间的值向上面的列表中较晚的值四舍五入。
| 名称: | font-style |
| 值: | normal | italic | oblique |
| 初始值: | normal |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
| 可动画: | 否 |
‘font-style’
属性允许选择斜体或倾斜字体面。斜体形式通常具有手写体的性质，而倾斜字体面通常是常规字体面的倾斜版本。倾斜字体面可以通过人工倾斜常规字体的字形来模拟。对比灰色的 Palatino ‘a’和 Baskerville ‘N’的人工倾斜渲染与实际的斜体版本：
人工倾斜与真实斜体
值具有以下含义：
如果没有可用的斜体或倾斜字体面，可以通过使用人工倾斜操作渲染非倾斜字体面来合成倾斜字体面。可以使用‘font-synthesis’属性禁用这些人工倾斜字体面的使用。倾斜操作的细节没有明确定义。
作者还应注意，合成方法可能不适用于西里尔字母等字体，其中斜体形式的形状差异很大。始终使用实际的斜体字体比依赖合成版本更好。
许多文字缺乏在使用正常字体面渲染的文本中混合手写形式的传统。中文、日文和韩文字体几乎总是缺少斜体或倾斜字体面。支持混合多种文字的字体有时会省略特定文字（如阿拉伯语）在斜体字体面中支持的字形集。用户代理在实现对系统字体回退的支持时，应谨慎处理跨字体面的字符映射表假设。
| 名称: | font-size |
| 值: | <absolute-size> | <relative-size> | <length-percentage> |
| 初始值: | medium |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 参考父元素的字体大小 |
| 媒体: | 视觉 |
| 计算值: | 绝对长度 |
| 可动画: | 作为长度 |
此属性表示所需的字体字形高度。对于可缩放字体，font-size 是应用于字体 EM 单位的比例因子。（注意，某些字形可能会超出其 EM 框。）对于不可缩放的字体，font-size 被转换为绝对单位，并与字体声明的‘font-size’进行匹配，两个匹配的值使用相同的绝对坐标空间。值具有以下含义：
[ xx-small | x-small | small | medium | large | x-large |
xx-large ]
font-size’进行解释的。可能的值有：
[ larger | smaller ]
例如，如果父元素的字体大小为‘medium’，则‘larger’值会使当前元素的字体大小变为‘large’。如果父元素的大小与表中的条目不接近，用户代理可以在表条目之间进行插值或舍入到最接近的一个。如果数值超出了关键字的范围，用户代理可能需要外推表值。
长度值 [CSS-VALUES] 指定了绝对字体大小（独立于用户代理的字体表）。负长度无效。
百分比值指定了相对于父元素字体大小的绝对字体大小。使用百分比值或 em 单位中的值，可以实现更强健和可级联的样式表。负百分比无效。
下表为用户代理提供了绝对大小缩放因子的指南，以及它们与 HTML 标题和绝对字体大小的映射。‘medium’值用作参考的中间值。用户代理可以根据不同的字体或不同类型的显示设备微调这些值。
| CSS 绝对大小值 | xx-small
| x-small
| small
| medium
| large
| x-large
| xx-large
| |
|---|---|---|---|---|---|---|---|---|
| 缩放因子 | 3/5 | 3/4 | 8/9 | 1 | 6/5 | 3/2 | 2/1 | 3/1 |
| HTML 标题 | h6 | h5 | h4 | h3 | h2 | h1 | ||
| HTML 字体大小 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
注意 1： 为了保持可读性，应用这些指南的用户代理仍应避免创建每 EM 单位小于 9 个设备像素的字体大小。
注意 2： 在 CSS1 中，相邻索引之间的建议缩放因子为 1.5，但用户体验证明这太大了。在 CSS2 中，计算机屏幕相邻索引之间的建议缩放因子为 1.2，但这仍然会对小尺寸产生问题。新的缩放因子在每个索引之间变化，以提供更好的可读性。
由于‘font-size-adjust’的数值和某些字体大小的不可用性，此属性的实际值可能与计算值不同。
子元素继承计算的‘font-size’值（否则，‘font-size-adjust’的效果将复合）。
p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
| 名称: | font-size-adjust |
| 值: | none | <number> |
| 初始值: | none |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
| 可动画: | 作为数字 |
对于任何给定的字体大小，文本的视觉大小和可读性在不同字体之间会有所不同。对于区分大写和小写字母的文字（如拉丁文或西里尔文），小写字母相对于大写字母的相对高度是决定可读性的一个因素。这通常被称为外观值。其精确定义为字体的x-height除以字体大小。
在发生字体回退的情况下，回退字体可能不会与所需字体家族共享相同的外观值，因此看起来不那么容易阅读。‘font-size-adjust’属性是一种在字体回退时保持文本可读性的方法。它通过调整字体大小，使得无论使用何种字体，x-height 都保持相同。
下面定义的样式定义了 Verdana 作为所需的字体家族，但如果 Verdana 不可用，将使用 Futura 或 Times。
p {
font-family: Verdana, Futura, Times;
}
<p>Lorem ipsum dolor sit amet, ...</p>
Verdana 的外观值相对较高，小写字母相对于大写字母较高，因此在小尺寸下文本看起来容易阅读。Times 的外观值较低，因此如果发生回退，文本在小尺寸下的可读性将不如 Verdana。
下图展示了用这些字体渲染的文本的比较，列展示了使用 Verdana、Futura 和 Times 渲染的文本。每一行内的单元格使用相同的字体大小值，并包含红线以显示 x-height
的差异。在上半部分，每一行都使用相同的字体大小值进行渲染。下半部分也是如此，但在此半部分中，还设置了‘font-size-adjust’属性，使得实际的字体大小被调整以保持每一行的 x-height 一致。注意下半部分每一行的小字体如何保持相对的可读性。
使用和不使用‘font-size-adjust’的文本
此属性允许作者为元素指定一个外观值，无论是否替换字体，它都将有效保持第一个选择字体的 x-height。值具有以下含义：
c = ( a / a' ) s
其中：
s = font-size 值 a = 外观值，由 'font-size-adjust' 属性指定 a' = 实际字体的外观值 c = 调整后的字体大小
负值无效。
此值适用于选择的任何字体，但在典型用法中，它应基于字体家族列表中第一个字体的外观值。如果指定准确，上述公式中的(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’属性的跨度来计算给定字体的外观值。如果使用相同的字体大小，当‘font-size-adjust’值对于给定字体准确时，跨度将匹配。
两个带有边框的跨度用于确定字体的外观值。‘font-size’在两个跨度中相同，但‘font-size-adjust’属性仅为右侧
跨度指定。从 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 的外观值为0.5
右侧的框比左侧的框略大，因此此字体的外观值小于 0.5。调整值，直到框对齐。
| 名称: | font |
| 值: | [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ /
<‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box
| small-caption | status-bar
|
| 初始值: | 参见各个属性的初始值 |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 参见各个属性的相关说明 |
| 媒体: | 视觉 |
| 计算值: | 参见各个属性的计算值 |
| 可动画: | 参见各个属性的动画值 |
‘font’ 属性，除了以下描述的内容外，是用于设置‘font-style’，‘font-variant’，‘font-weight’，‘font-stretch’，‘font-size’，‘line-height’，‘font-family’的简写属性。在该简写属性中也可以包含对‘font-variant’属性的值的设置，但仅限于 CSS 2.1 支持的值，本规范新增的‘font-variant’值不能在该简写属性中使用：
<font-variant-css21> = [normal | small-caps]
此属性的语法基于传统的排版简写表示法，用于设置与字体相关的多个属性。
‘font’ 属性的所有子属性首先都会重置为它们的初始值，包括上面列出的属性，以及 ‘font-size-adjust’，‘font-kerning’，‘font-variant’的所有子属性，和‘font-feature-settings’，但不包括 ‘font-synthesis’。然后，简写属性中明确指定了值的那些属性会被设置为这些值。关于允许的值和初始值的定义，参见前面定义的属性。出于向后兼容的原因，不可能使用‘font’简写属性将‘font-size-adjust’设置为除其初始值以外的任何值；相反，应该使用单独的属性。
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; }
在第二个规则中，字体大小的百分比值（‘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’）设置为相应的值。其余两个属性‘font-style’和‘font-weight’则应用于关键字‘normal’。
第六个规则设置了‘font-style’，‘font-stretch’，‘font-size’和‘font-family’，其余字体属性将设置为它们的初始值。
由于‘font-stretch’属性在 CSS 2.1 中没有定义，在使用‘font-stretch’值的‘font’规则中，作者应包含一个兼容较旧用户代理的额外版本：
p {
font: 80% sans-serif; /* 适用于较旧的用户代理 */
font: condensed 80% sans-serif;
}
以下值指的是系统字体：
系统字体只能整体设置，也就是说，字体家族、大小、粗细、样式等都同时设置。然后，可以根据需要单独更改这些值。如果在某个平台上不存在具有指示特征的字体，用户代理应进行智能替换（例如，可以将‘caption’字体的较小版本用于‘small-caption’字体），或者替换为用户代理的默认字体。对于系统字体，如果任何单个属性不属于操作系统可用的用户首选项，则应将这些属性设置为其初始值。
这就是为什么这个属性“几乎”是一个简写属性的原因：系统字体只能通过此属性指定，不能通过‘font-family’本身指定，因此‘font’允许作者做的比其子属性的总和更多。然而，个别属性，如‘font-weight’，仍然会采用系统字体的值，可以单独更改。
请注意，上面列出的系统字体使用的关键字只有在初始位置时才被视为关键字，在其他位置，相同的字符串将被视为字体家族名称的一部分：
font: menu; /* 使用系统菜单的字体设置 */ font: large menu; /* 使用名为 "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
}
| 名称: | font-synthesis |
| 值: | none | [ weight || style ] |
| 初始值: | weight style |
| 适用于: | 所有元素 |
| 继承: | 是 |
| 百分比: | 不适用 |
| 媒体: | 视觉 |
| 计算值: | 按指定值 |
| 可动画: | 否 |
此属性控制当字体家族缺少粗体或斜体时，用户代理是否允许合成粗体或斜体。如果未指定‘weight’，用户代理不得合成粗体；如果未指定‘style’，用户代理不得合成斜体。值为‘none’时，禁止所有合成字体。
下面的样式规则禁用了合成的阿拉伯语斜体：
*:lang(ar) { font-synthesis: none; }
@font-face 规则@font-face
规则允许链接到在需要时自动获取和激活的字体。这使得作者可以选择与页面设计目标更为匹配的字体，而不再局限于某个平台上可用的一组字体。通过一组字体描述符来定义字体资源的位置（本地或外部），以及单个字体的样式特征。可以使用多个@font-face 规则来构建包含多种字体样式的字体家族。使用 CSS
字体匹配规则，用户代理可以有选择地仅下载所需文本的字体样式。
@font-face 规则由 @font-face 关键字后跟一块描述符声明块组成。根据语法，本规范定义了以下规则：
font_face_rule
: FONT_FACE_SYM S* '{' S* descriptor_declaration? [ ';' S* descriptor_declaration? ]* '}' S*
;
descriptor_declaration
: property ':' S* expr
;
引入了以下新的定义：
- -|\\0{0,4}2d(\r\n|[ \t\r\n\f])?
F f|\\0{0,4}(46|66)(\r\n|[ \t\r\n\f])?
引入了以下新标记：
@{F}{O}{N}{T}{-}{F}{A}{C}{E} {return FONT_FACE_SYM;}
每个 @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-face
规则。
在用户代理资源有限或实现了禁用可下载字体资源的功能的情况下，@font-face
规则必须被忽略；不得更改本规范中定义的各个描述符的行为。
| 名称: | font-family |
| 值: | <family-name> |
| 初始值: | 不适用 |
该描述符定义了将在所有 CSS 字体家族名称匹配中使用的字体家族名称。它是使 @font-face
规则有效所必需的。它会覆盖底层字体数据中包含的字体家族名称。如果字体家族名称与给定用户环境中可用的字体家族相同，它将有效地隐藏使用样式表的文档中的底层字体。这允许网页作者自由选择字体家族名称，而不必担心与给定用户环境中存在的字体家族名称发生冲突。同样，平台替代的字体家族名称也不应被使用。
| 名称: | src |
| 值: | [ <url> [format(<string> #)]? | <font-face-name> ] # |
| 初始值: | 不适用 |
此描述符指定包含字体数据的资源。它是使@font-face规则有效所必需的。其值是一个由逗号分隔的外部引用或本地安装的字体名称的优先级列表。当需要字体时，用户代理会遍历列出的引用集，使用它可以成功激活的第一个。包含无效数据的字体或未找到的本地字体将被忽略，用户代理将加载列表中的下一个字体。
与 CSS 中的其他 URL 一样，URL 可以是相对的，在这种情况下，它是相对于包含@font-face规则的样式表的位置来解析的。在 SVG 字体的情况下，URL 指向包含 SVG
字体定义的文档中的一个元素。如果省略了元素引用，则默认为引用第一个定义的字体。同样，可以包含多个字体的字体容器格式必须为给定的@font-face规则加载唯一的一个字体。片段标识符用于指示要加载的字体；这些使用 PostScript
名称作为字体的标识符，如[RFC8081]中定义。符合规范的用户代理必须跳过下载未知或不受支持的片段标识符的字体资源。例如，不支持 OpenType
集合的较旧用户代理将跳至列表中的下一个 URL。
src: url(fonts/simple.woff); /* 相对于样式表位置加载 simple.woff */ src: url(/fonts/simple.woff); /* 从绝对位置加载 simple.woff */ src: url(fonts/coll.otc#foo); /* 从集合 coll.otc 加载字体 foo */ src: url(fonts/coll.woff2#foo); /* 从 woff2 集合 coll.woff2 加载字体 foo */ src: url(fonts.svg#simple); /* 加载 ID 为 'simple' 的 SVG 字体 */
外部引用由一个 URL 组成，后跟一个可选的提示，描述该 URL 引用的字体资源的格式。格式提示包含一个用逗号分隔的格式字符串列表，表示已知的字体格式。符合规范的用户代理必须跳过下载仅支持或未知字体格式的字体资源。如果未提供格式提示，用户代理应下载字体资源。
/* 尽可能加载 WOFF2 字体，否则加载 WOFF，否则使用 OpenType 字体 */
@font-face {
font-family: bodytext;
src: url(ideal-sans-serif.woff2) format("woff2"),
url(good-sans-serif.woff) format("woff"),
url(basic-sans-serif.ttf) format("opentype");
}
本规范定义的格式字符串：
| 字符串 | 字体格式 | 常见扩展名 |
|---|---|---|
"woff"
| WOFF 1.0 (Web Open Font Format) | .woff |
"woff2"
| WOFF 2.0 (Web Open Font Format) | .woff2 |
"truetype"
| TrueType | .ttf |
"opentype"
| OpenType | .ttf, .otf |
"embedded-opentype"
| Embedded OpenType | .eot |
"svg"
| SVG 字体 | .svg, .svgz |
鉴于 TrueType 和 OpenType 的常见用法之间的重叠[OPENTYPE]，格式提示 "truetype" 和
"opentype" 必须被视为同义词；格式提示 "opentype" 并不意味着字体包含 PostScript CFF 样式的字形数据或包含 OpenType
布局信息（参见附录A以了解更多背景信息）。
当作者希望使用给定字体的本地可用副本并在不可用时下载它时，可以使用 local()。local()的本地安装<font-face-name> 参数是唯一标识更大字体家族中单个字体的格式特定字符串。<font-face-name>
的语法是由"local("和")"包围的唯一字体名称。名称可以选择用引号括起来。如果未加引号，则适用于未加引号的字体家族名称处理约定；名称必须是一系列由空白字符分隔的标识符，通过用单个空格连接标识符来转换为字符串。
/* Gentium 的常规样式 */
@font-face {
font-family: MyGentium;
src: local(Gentium), /* 使用本地可用的 Gentium */
url(Gentium.woff); /* 否则，下载它 */
}
对于 OpenType 和 TrueType 字体，此字符串仅用于匹配本地可用字体的名称表中的 PostScript 名称或全字体名称。使用哪种类型的名称因平台和字体而异，因此作者应包括这些名称，以确保在各平台之间正确匹配。不得使用平台替代的字体名称。
/* Gentium 的粗体样式 */
@font-face {
font-family: MyGentium;
src: local(Gentium Bold), /* 全字体名称 */
local(Gentium-Bold), /* PostScript 名称 */
url(GentiumBold.woff); /* 否则，下载它 */
font-weight: bold;
}
正如@font-face规则指定字体家族中的单个字体的特征一样，与
local()一起使用的唯一名称指定了单个字体，而不是整个字体家族。根据 OpenType 字体数据定义，PostScript 名称可以在字体的名称表中找到，名称记录的nameID = 6中（参见[OPENTYPE] 了解更多详情）。PostScript 名称是 OSX 上所有字体和 Windows 上 PostScript CFF
字体的常用键。全字体名称（nameID = 4）用作 Windows 上带有 TrueType 字形的字体的唯一键。
对于具有多个全字体名称本地化的 OpenType 字体，使用美国英语版本（Windows 的language ID = 0x409和 Macintosh
的language ID = 0），或者当没有美国英语全字体名称时使用第一个本地化（OpenType 规范建议所有字体至少包括美国英语名称）。用户代理如果还匹配其他全字体名称，例如
在当前系统区域设置为荷兰语时匹配荷兰语名称，则视为不符合规范。这不是为了优先使用英语，而是为了避免在字体版本和操作系统本地化之间的匹配不一致，因为字体样式名称（例如“Bold”）经常被翻译成多种语言，而且不同平台和字体版本之间可用的本地化集合差异很大。匹配家族名称（nameID = 1）与样式名称（nameID = 2）组合的用户代理视为不符合规范。
这还允许引用属于更大字体家族而无法通过其他方式引用的字体。
使用本地字体或引用其他文档中的 SVG 字体：
@font-face {
font-family: Headline;
src: local(Futura-Medium),
url(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;
/* 与 Hoefler Text Regular 拥有相同字体特征 */
src: local(HoeflerText-Ornaments);
}
由于本地化全名永远不会匹配，以下头样式规则的文档无论系统区域设置是否设置为芬兰语，始终会使用默认的衬线字体渲染：
@font-face {
font-family: SectionHeader;
src: local("Arial Lihavoitu"); /* 芬兰语全名 Arial Bold，应失败 */
font-weight: bold;
}
h2 { font-family: SectionHeader, serif; }
符合规范的用户代理在以下示例中永远不会加载字体 ‘gentium.eot’，因为它包含在‘src’描述符的第一个定义中，并在同一@font-face规则的第二个定义中被覆盖：
@font-face {
font-family: MainText;
src: url(gentium.eot); /* 供旧版用户代理使用 */
src: local("Gentium"), url(gentium.woff); /* 覆盖 src 定义 */
}
| 名称： | font-style |
| 值： | normal | italic | oblique |
| 初始值： | normal |
| 名称： | font-weight |
| 值： | normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
| 初始值： | normal |
| 名称： | font-stretch |
| 值： | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded |
| 初始值： | normal |
这些描述符定义了字体样式的特性，并在将样式匹配到特定字体时使用。对于使用多个@font-face规则定义的字体系列，用户代理可以下载整个字体系列中的所有字体，也可以使用这些描述符有选择地下载与文档中实际使用的样式匹配的字体。对于这些描述符的值，与对应的字体属性的值相同，除了不允许使用相对关键字，如‘bolder’和‘lighter’。如果省略了这些描述符，则假定初始值。
这些字体样式属性的值将代替基础字体数据隐含的样式。这使得作者能够在灵活组合字体时，即使在原始字体数据安排不同的情况下，也能进行组合。实现合成加粗和斜体的用户代理必须仅在字体描述符暗示需要时才应用合成样式，而不是基于字体数据隐含的样式属性。
本节定义的字体描述符用于从给定家族的@font-face规则定义的字体集中选择字体。
考虑一个包含单个常规字体的家族：
@font-face {
font-family: BaskervilleSimple;
src: url(baskerville-regular.woff);
}
未加样式的文本将使用@font-face规则中定义的常规字体显示：
然而，斜体文本将在大多数用户代理中使用常规字体的合成斜体字形显示，因为未定义单独的斜体字体：
现在考虑一个定义了实际斜体字体的家族：
@font-face {
font-family: BaskervilleFull;
src: url(baskerville-regular.woff);
}
@font-face {
font-family: BaskervilleFull;
src: url(baskerville-italic.woff);
font-style: italic;
}
第二个@font-face规则将字体资源baskerville-italic.woff定义为具有正常权重、正常拉伸和斜体样式的字体。当显示斜体文本时，用户代理将使用此字体，因为它是最接近斜体文本的匹配。因此，文本将使用字体设计师设计的字形显示，而不是使用常规字体的合成斜体字形：
有关选择字体家族中特定字体的过程的更完整详细信息，请参阅字体匹配部分。
| 名称： | unicode-range |
| 值： | <urange> # |
| 初始值： | U+0-10FFFF |
该描述符定义了可能由其声明的字体支持的一组Unicode[UNICODE]代码点。描述符的值是一个用逗号分隔的Unicode范围(<urange>)值列表。这些范围的并集定义了一组代码点，当用户代理决定是否为给定的文本运行下载字体资源时，作为一个提示。
每个<urange>值是一个UNICODE-RANGE标记，由一个“U+”或“u+”前缀后跟以下三种形式之一的代码点范围组成。不符合这些形式之一的范围是无效的，将导致声明被忽略。
?’字符表示的代码点集合定义，表示任何十六进制数字
各个代码点使用与Unicode字符代码点[UNICODE]相对应的十六进制值表示。Unicode代码点的值必须在0到10FFFF之间（含）。代码点的数字值对ASCII大小写不敏感。对于区间范围，起始和结束代码点必须在上述范围内，并且结束代码点必须大于或等于起始代码点。
使用‘?’指定的通配符范围在缺少初始数字的情况下（例如“U+???”）是有效的，并且等同于带有初始零数字的通配符范围（例如“U+0???” =
“U+0000-0FFF”）。超出Unicode代码点范围的通配符范围是无效的。因此，虽然UNICODE-RANGE标记接受六个字符，但最多只能有五个尾随‘?’通配符字符。
在‘unicode-range’描述符声明中的Unicode范围逗号分隔列表中，范围可以重叠。这些范围的并集定义了可用于对应字体的代码点集。用户代理不得为此集合之外的代码点下载或使用该字体。用户代理可以将范围列表标准化为不同的列表，但代表相同的代码点集。
相关字体可能不包含‘unicode-range’描述符定义的整个代码点集的字形。当使用该字体时，有效字符映射是‘unicode-range’定义的代码点与字体的字符映射的交集。这允许作者以宽泛的范围定义支持的范围，而不必担心底层字体支持的精确代码点范围。
多个具有相同字体系列和样式描述符值但不同Unicode范围的@font-face规则可用于创建复合字体，从而将不同字体的字形混合用于不同的书写系统。这可以用于组合仅包含单一书写系统（例如，拉丁文、希腊文、西里尔文）字形的字体，或者作者也可以将字体分割为常用字符和不常用字符的字体。由于用户代理只会下载所需的字体，这有助于减少页面带宽。
如果一组具有相同字体系列和样式描述符值的@font-face规则的Unicode范围重叠，则这些规则按它们定义的逆序排列；最后定义的规则将在给定字符时首先检查。
特定语言或字符的示例范围：
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);
/* 未指定范围，默认使用整个范围 */
}
@font-face {
font-family: JapaneseWithGentium;
src: url(../fonts/Gentium.woff);
unicode-range: U+0-2FF;
}
考虑一个通过将拉丁字符、日文字符和其他字符分离到不同的字体文件中来优化带宽的家族：
/* 回退字体 - 大小：4.5MB */
@font-face {
font-family: DroidSans;
src: url(DroidSansFallback.woff);
/* 未指定范围，默认使用整个范围 */
}
/* 日文字体 - 大小：1.2MB */
@font-face {
font-family: DroidSans;
src: url(DroidSansJapanese.woff);
unicode-range: U+3000-9FFF, U+ff??;
}
/* 拉丁文、希腊文、西里尔文以及一些标点符号和符号 - 大小：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>这是那</p>
在这种情况下，用户代理首先检查包含拉丁字符的字体的unicode-range（DroidSans.woff）。由于上面所有字符都在U+0-5FF范围内，用户代理会下载字体并使用该字体渲染文本。
接下来，考虑使用箭头字符（⇨）的文本：
<p>这 ⇨ 那<p>
用户代理再次首先检查包含拉丁字符的字体的unicode-range。由于U+2000-2300包括箭头代码点（U+21E8），用户代理会下载字体。然而，对于这个字符，拉丁字体没有匹配的字形，因此用于字体匹配的有效unicode-range排除了此代码点。接下来，用户代理评估日文字体。日文字体的unicode-range（U+3000-9FFF和U+ff??）不包括U+21E8，因此用户代理不会下载日文字体。接下来考虑回退字体。回退字体的@font-face规则未定义unicode-range，因此其值默认为所有Unicode代码点的范围。回退字体被下载并用于渲染箭头字符。
| 名称： | font-feature-settings |
| 值： | normal | <feature-tag-value> # |
| 初始值： | normal |
此描述符定义了当通过@font-face规则定义的字体呈现时应用的初始设置。它不影响字体选择。值与下文定义的对应‘font-feature-settings’属性定义的值相同，除了省略了‘inherit’值。当使用多个字体特性描述符或属性时，对文本渲染的累积效果详见下文的字体特性解析部分。
@font-face规则旨在允许延迟加载字体资源，只有在文档中使用时才下载。样式表可以包含@font-face规则，用于一个字体库，其中只有部分字体被使用；用户代理必须仅下载在适用于特定页面的样式规则中引用的那些字体。那些在没有考虑字体是否在页面中实际使用的情况下下载所有定义在@font-face规则中的字体的用户代理，被认为是不符合标准的。在字符回退的情况下，用户代理可以下载字体，如果该字体包含在给定文本运行的‘font-family’的计算值中。
@font-face {
font-family: GeometricModern;
src: url(font.woff);
}
p {
/* 对于包含p元素的页面，字体将被下载 */
font-family: GeometricModern, sans-serif;
}
h2 {
/* 对于包含h2元素的页面，字体可能会被下载，即使本地已有Futura字体 */
font-family: Futura, GeometricModern, sans-serif;
}
在文本内容加载时，可下载字体尚未可用的情况下，用户代理可以按无可下载字体资源时的方式渲染文本，也可以使用回退字体透明地渲染文本，以避免出现闪烁的回退字体文本。在字体下载失败的情况下，用户代理必须显示文本，仅留下透明文本被视为不符合标准的行为。建议作者在字体列表中使用与可下载字体度量值接近的回退字体，以尽可能避免大规模页面回流。
对于字体加载，用户代理必须使用可能启用CORS的fetch方法，该方法由[FETCH]规范定义，用于在@font-face规则中定义的URL。在获取时，用户代理必须使用“Anonymous”模式，将引用来源设置为样式表的URL，并将源设置为包含文档的URL。
这对作者的影响是，除非作者采取特定步骤允许跨域加载，否则通常不会加载跨域字体。站点可以使用Access-Control-Allow-Origin
HTTP头显式允许跨站点加载字体数据。对于其他方案，除了可能启用CORS的fetch方法允许的情况外，没有定义或要求显式机制来允许跨域加载。
https://example.com/page.html，并且所有URL都链接到用户代理支持的有效字体资源。使用以下‘src’描述符值定义的字体将会被加载：
/* 同源 (即域名、方案、端口与文档匹配) */
src: url(fonts/simple.woff);
/* 无重定向的数据URL被视为同源 */
src: url("data:application/font-woff;base64,...");
/* 跨域，不同域名 */
/* Access-Control-Allow-Origin 响应头设置为 '*' */
src: url(http://another.example.com/fonts/simple.woff);
使用以下‘src’描述符值定义的字体将无法加载：
/* 跨域，不同方案 */ /* 响应中没有Access-Control-xxx头 */ src: url(https://example.com/fonts/simple.woff); /* 跨域，不同域名 */ /* 响应中没有Access-Control-xxx头 */ src: url(http://another.example.com/fonts/simple.woff);
以下算法描述了如何将字体与单个文本运行中的字符关联。对于运行中的每个字符，选择一个字体系列，并选择包含该字符字形的特定字体。
作为下文所述字体匹配算法的一部分，用户代理必须将样式规则中使用的字体系列名称与给定环境中可用字体中包含的实际字体系列名称或@font-face规则中定义的字体系列名称进行匹配。用户代理必须使用Unicode规范[UNICODE]中概述的“默认无区分大小写匹配”算法无区分大小写地匹配这些名称。该算法详见名为“默认大小写算法”的3.13节。特别是，该算法必须在不规范化涉及的字符串且不应用任何特定语言调整的情况下应用。此算法指定的大小写折叠方法使用Unicode字符数据库[UNICODE]中CaseFolding.txt文件中的状态字段为‘C’或‘F’的大小写映射。
对于作者来说，这意味着无论这些名称存在于平台字体中还是样式表中包含的@font-face规则中，字体系列名称都将无区分大小写地匹配。作者应注意确保名称使用与实际字体系列名称一致的字符序列，特别是在使用诸如变音符号等组合字符时。例如，包含小写字母a
(U+0061) 后跟组合圆圈符号 (U+030A) 的系列名称不会匹配一个看起来相同但使用了预组合的小写字母a环字符 (U+00E5) 而不是组合序列的名称。
实施者应注意，验证给定的无区分大小写字符串比较实现是否使用了该精确算法，不应假设给定的字符串匹配例程遵循该算法，因为其中许多例程具有特定于区域设置的行为或使用某种程度的字符串规范化[UAX15]。
为文本运行中的给定字符选择字体的过程包括迭代由‘font-family’属性指定的字体系列，基于其他字体属性选择具有适当样式的字体，然后确定是否存在该字符的字形。这是通过使用字体的字符映射完成的，该数据将字符映射到该字符的默认字形。如果(1) 字符包含在字体的字符映射中，并且(2) 如果包含的书写系统要求，字体支持该字符，则认为字体支持给定字符。
某些传统字体可能会在字符映射中包含给定字符，但缺少正确呈现包含该字符的文本运行所需的排版信息（例如OpenType布局表或Graphite表）。
由基本字符后跟一系列组合字符组成的代码点序列的处理略有不同，详见下文的集群匹配部分。
对于此过程，给定字体系列的默认样式定义为在所有字体样式属性均设置为其初始值时选择的样式。
font-family’属性指定的第一个系列名称开始。
@font-face规则定义的字体中找到系列名称，然后在可用的系统字体中查找，按照上述部分的描述使用无区分大小写比较匹配名称。在包含多个本地化字体系列名称的系统上，用户代理必须独立于所使用的底层系统区域设置或平台API匹配这些名称。如果@font-face规则中为给定样式定义的字体资源不可用或包含无效字体数据，则该样式应被视为在系列中不存在。如果通过@font-face规则定义的系列没有样式存在，则该系列应被视为丢失；在这种情况下，不得匹配具有相同名称的平台字体。
@font-face规则定义且具有相同字体描述符值但‘unicode-range’值不同的样式组被视为一个复合样式：
font-stretch’。如果匹配集合包含与‘font-stretch’值匹配的宽度值的样式，则移除匹配集合中具有其他宽度值的样式。如果没有样式完全匹配宽度值，则使用最接近的宽度。如果‘font-stretch’的值为‘normal’或某个压缩值，则首先检查较窄的宽度值，然后检查较宽的值。如果‘font-stretch’的值为某个扩展值，则首先检查较宽的值，然后检查较窄的值。一旦通过此过程确定了最接近的匹配宽度，则移除匹配集合中具有其他宽度的样式。
font-style’。如果‘font-style’的值为‘italic’，则首先检查斜体样式，然后检查倾斜样式，然后检查正常样式。如果值为‘oblique’，则首先检查倾斜样式，然后检查斜体样式，然后检查正常样式。如果值为‘normal’，则首先检查正常样式，然后检查倾斜样式，然后检查斜体样式。排除其他样式值的样式。用户代理可以区分平台字体系列中的斜体和倾斜样式，但这不是必需的，因此所有斜体或倾斜样式可以视为
斜体样式。然而，在通过@font-face规则定义的字体系列中，必须使用‘font-style’描述符的值来区分斜体和倾斜样式。对于缺少斜体或倾斜样式的系列，用户代理可以创建人工倾斜样式，如果这由‘font-synthesis’属性的值允许。
font-weight’，因此它总是将匹配集合缩减为单个字体样式。如果使用更粗/更轻的相对权重，则根据‘font-weight’属性的定义，基于继承的权重值计算有效权重。给定期望的权重和经过上述步骤后匹配集合中的样式权重，如果期望的权重可用，则该样式匹配。否则，使用以下规则选择权重：
font-size’。(通常，可缩放字体的大小四舍五入到最接近的像素，而位图字体的容差可能高达20%。)进一步的计算，例如在其他属性中通过‘em’值计算，基于使用的‘font-size’值，而不是指定的值。
如果匹配的样式是通过@font-face规则定义的，用户代理必须使用以下过程选择单个字体：
unicode-range’描述符值定义的字符范围包括相关字符，则加载字体。
当匹配的样式是复合样式时，用户代理必须对复合样式中的每个样式按照@font-face规则定义的逆序使用上述过程。
在下载期间，用户代理可以等待字体下载完成或使用替代字体度量进行一次渲染，然后在字体下载后再次渲染。
如果没有匹配的样式存在或匹配的样式不包含要呈现的字符的字形，则选择下一个系列名称，并重复前三个步骤。不考虑系列中的其他样式。唯一的例外是，如果默认样式支持给定字形，并且‘font-synthesis’属性的值允许合成这些样式，则用户代理可以选择性地替换合成倾斜版本。例如，如果斜体样式不支持阿拉伯字符，则可以使用常规样式的合成斜体版本。
允许对该过程进行优化，前提是实现行为如同精确遵循算法一样。匹配按明确定义的顺序进行，以确保在给定相同的可用字体和渲染技术的情况下，结果在用户代理之间尽可能一致。
首个可用字体，例如在定义‘ex’和‘ch’等字体相对长度或定义‘line-height’属性时使用的，是指在‘font-family’列表中与U+0020（空格）字符匹配的第一个可用字体（如果没有可用字体，则为用户代理的默认字体）。
当文本包含诸如组合符号等字符时，理想情况下应使用与符号相同的字体渲染基础字符，这样可以确保符号的正确定位。因此，集群的字体匹配算法比单独匹配单个字符的通用情况更为专业。对于包含变体选择符的序列，变体选择符指示要为给定字符使用的精确字形，用户代理总是尝试系统字体回退以在使用基础字符的默认字形之前找到适当的字形。
包含组合符号或其他修饰符的代码点序列称为字素集群（有关更完整的描述，请参见[CSS-TEXT-3]和[UAX29]）。对于包含基础字符b和一系列组合字符c1, c2…的给定集群，使用以下步骤匹配整个集群：
CSS字体匹配始终在包含Unicode字符的文本运行上进行[UNICODE]，因此假定使用传统编码的文档在匹配字体之前已被转码。对于包含传统编码和Unicode字符映射的字体，传统编码字符映射的内容不得对字体匹配过程的结果产生影响。
字体匹配过程不假定文本运行处于规范化或非规范化形式（更多详细信息请参见[CHARMOD-NORM]）。字体可能仅支持预组合形式，而不支持基础字符加组合符号的分解序列。作者应始终根据其内容调整字体选择，包括内容是否包含规范化或非规范化的字符流。
如果给定字符是私用区Unicode代码点，用户代理只能匹配‘font-family’列表中非通用系列的字体系列。如果‘font-family’列表中命名的系列都不包含该代码点的字形，用户代理必须为该字符显示某种形式的缺失字形符号，而不是尝试为该代码点执行系统字体回退。在匹配替换字符U+FFFD时，用户代理可以跳过字体匹配过程并立即显示某种形式的缺失字形符号，且不要求显示由字体匹配过程选择的字体中的字形。
通常，给定系列的字体将具有相同或相似的字符映射。这里概述的过程旨在处理甚至包含具有广泛不同字符映射样式的字体系列。然而，作者应注意，使用此类系列可能会导致意外结果。
上述算法在多个关键点上与CSS 2.1不同。进行了这些更改以更好地反映用户代理实现中的实际字体匹配行为。
与CSS 2.1中的字体匹配算法相比的差异：
值得注意的是，CSS选择器语法可以用于创建语言敏感的排版。例如，某些中文和日文字符统一为相同的Unicode代码点，尽管这两种语言中的抽象字形不同。
*:lang(ja) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
*:lang(zh-Hant-TW) { font: 800 14pt/16.5pt "Li Sung", serif; }
这将选择具有给定语言（例如日语或在台湾使用的繁体中文）的任何元素，并使用适当的字体。
现代字体技术支持多种高级排版和特定语言的字体特性。通过使用这些特性，单个字体可以提供广泛的字形选择，包括连字、上下文和风格替代、制表和旧式数字、小型大写字母、自动分数、华丽字形以及特定语言的替代字形。为了让作者能够控制这些字体功能，CSS3扩展了‘font-variant’属性。它现在作为一组属性的简写，这些属性提供对风格字体特性的控制。
本节为非规范性内容
用于显示拉丁文本的简单字体使用非常基础的处理模型。字体包含一个字符映射，将每个字符映射到该字符的字形。后续字符的字形只是简单地沿着一行文本一个接一个地排列。现代字体格式如OpenType和AAT（Apple高级排版）使用了更丰富的处理模型。给定字符的字形选择和定位不仅基于字符本身的代码点，还基于相邻字符、语言、书写系统以及为文本启用的特性。某些字体特性可能是特定书写系统所必需的，或者建议默认启用，或者它们可能是由作者控制的风格特性。字体选择和定位发生在整个文本处理操作顺序（如文本转换、文本方向和文本对齐）中的哪个点，在[CSS-TEXT-3]中进行了描述，详见§ 文本处理操作顺序。
要查看这些特性的良好视觉概述，请参见[OPENTYPE-FONT-GUIDE]。有关OpenType字体字形处理的详细说明，请参见[WINDOWS-GLYPH-PROC]。
风格字体特性可分为两大类：一种影响字形形状与周围上下文的协调性，如字距调整和连字特性，另一种如小型大写字母、下标/上标和替代特性影响形状选择。
下文列出的‘font-variant’子属性用于控制这些风格字体特性。它们不控制显示某些书写系统所需的特性，例如显示阿拉伯文或印度文字时使用的OpenType特性。它们影响字形选择和定位，但不影响字体选择（除非出于与CSS
2.1兼容的需要）。
为了确保用户代理之间的一致行为，列出了个别属性的等效OpenType属性设置，并且这些设置是规范性的。使用其他字体格式时，这些设置应作为将CSS字体特性属性值映射到特定字体特性的指导。
OpenType还支持特定语言的字形选择和定位，以便在语言要求特定显示行为的情况下正确显示文本。许多语言共享一种书写系统，但某些字母的形状在这些语言中可能有所不同。例如，某些西里尔字母在俄语文本中的形状与保加利亚语中的形状不同。在拉丁文本中，通常将“fi”呈现为一个显式的fi连字，该连字中“i”没有点。然而，在像土耳其语这样的语言中，使用了带点的i和无点的i，因此重要的是不要使用这个连字，或者使用包含“i”上方有点的特定版本。下面的示例展示了基于西班牙语、意大利语和法语正字法中的风格传统的特定语言的变化：
如果根据文档语言规则已知元素的内容语言，用户代理必须从内容语言推断OpenType语言系统，并在使用OpenType字体选择和定位字形时使用该语言系统。
| 名称： | font-kerning |
| 值： | auto | normal | none |
| 初始值： | auto |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
字距调整是对字形间距的上下文调整。此属性控制度量字距调整，即利用字体中包含的调整数据的字距调整。
对于不包含字距调整数据的字体，此属性将没有可见效果。使用OpenType字体渲染时，[OPENTYPE]规范建议默认启用字距调整。当启用字距调整时，启用OpenType的kern特性（对于垂直文本运行，启用vkrn特性）。用户代理还必须支持仅通过包含在kern字体表中的数据支持字距调整的字体，如OpenType规范中详细描述的那样。如果定义了‘letter-spacing’属性，字距调整将被视为默认间距的一部分，并在应用字距调整后进行字母间距调整。
当设置为‘auto’时，用户代理可以根据多个因素决定是否应用字距调整：文本大小、书写系统或影响文本处理速度的其他因素。希望实现正确字距调整的作者应使用‘normal’明确启用字距调整。同样，某些作者可能希望在性能比精确外观更重要的情况下禁用字距调整。然而，在设计良好的现代实现中，字距调整的使用通常不会对文本渲染速度产生较大影响。
| 名称： | font-variant-ligatures |
| 值： | normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
连字和上下文形式是通过组合字形来产生更和谐形式的方法。
<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’指定启用常见的默认特性，在下一节中详细描述。对于OpenType字体，常见连字和上下文形式默认启用，任意和历史连字默认不启用。
正确渲染复杂书写系统所需的必需连字不受上述设置的影响，包括‘none’（OpenType特性：rlig）。
| 名称： | font-variant-position |
| 值： | normal | sub | super |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
此属性用于启用排版下标和上标字形。这些是设计在与默认字形相同的em方框内的替代字形，旨在与默认字形排列在同一基线上，无需调整大小或重新定位基线。它们明确设计为与周围文本相匹配，并且在不影响行高的情况下更具可读性。
下标字形（上）与典型的合成下标（下）
各个值的含义如下：
由于下标和上标的语义性质，当给定连续文本运行的值为‘sub’或‘super’时，如果该运行中的所有字符都没有变体字形，则应为所有字符合成模拟字形，使用未应用此特性的字形的缩小形式。这是按运行进行的，以避免变体字形和合成字形的混合，从而导致不正确的对齐。如果OpenType字体中缺少给定字符的下标或上标字形，用户代理必须合成适当的下标和上标字形。
上标替代字形（左）、合成上标字形（中）以及两者的错误混合（右）
在仅将文本装饰应用于包含上标或下标字形的文本运行的情况下，可以使用合成字形，以避免装饰位置出现问题。
过去，用户代理曾使用font-size和vertical-align来模拟HTML的sub和sup元素的下标和上标。为了提供一种向后兼容的方式定义下标和上标，建议作者使用条件规则[CSS3-CONDITIONAL]，以便旧版用户代理仍然可以通过旧机制渲染下标和上标。
由于font-size: smaller通常用于这些元素，因此应用于下标和上标文本的有效缩放因子会根据大小而有所不同。对于较大的文本，字体大小通常减少三分之一，但对于较小的文本，缩减可能要少得多。这使得下标和上标即使在使用小文本尺寸的元素中仍然保持可读性。用户代理在决定如何合成下标和上标字形时应考虑这一点。
OpenType字体格式在OS/2表中定义了下标和上标度量[OPENTYPE]，但这些在实践中并不总是准确的，因此在合成下标和上标字形时无法依赖。
作者应注意，字体通常仅为字体支持的所有字符的子集提供下标和上标字形。例如，虽然通常为拉丁数字提供下标和上标字形，但标点符号和字母字符的字形较少提供。为此属性定义的合成回退规则确保下标和上标始终显示，但如果所使用的字体未为下标或上标中的所有字符提供适当的替代字形，外观可能与作者的预期不符。
此属性不可累积。将其应用于下标或上标中的元素不会嵌套下标或上标字形的位置。在该属性值为‘sub’或‘super’的文本运行中包含的图像将像其值为‘normal’时一样绘制。
由于这些限制，不建议在用户代理样式表中使用‘font-variant-position’。作者应在下标或上标仅包含指定字体支持的狭窄字符范围的情况下使用它。
变体字形使用与默认字形相同的基线。沿基线的位置没有偏移，因此使用变体字形不会影响内联框的高度或改变行框的高度。这使得上标和下标变体非常适合需要保持行距恒定的情况，例如在多栏布局中。
一个典型的用户代理默认样式，适用于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’属性定义，并使用标准默认设置来渲染下标。
| 名称： | font-variant-caps |
| 值： | normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
此属性允许选择用于小型或小号大写字母或标题的替代字形。这些字形经过专门设计，可以与周围的正常字形很好地融合，保持重量和可读性，而不会因为文本只是简单地调整大小以适应这一目的而受到影响。
各个值的含义如下：
这些字形的可用性取决于字体的特性列表中是否定义了给定特性。用户代理可以选择性地根据脚本确定此特性，但不应根据单个字符确定。
某些字体可能仅支持此属性描述的部分特性或不支持任何特性。为了与CSS 2.1的向后兼容，如果指定了‘small-caps’或‘all-small-caps’但某字体不支持小型大写字母字形，用户代理应模拟小型大写字体，例如通过使用正常字体并将小写字母的字形替换为大写字母字形的缩放版本（在‘all-small-caps’情况下，替换大写和小写字母的字形）。
合成与真实的小型大写字母
‘font-feature-settings’属性不会影响是否使用模拟小型大写字体的决定。
#example1 { font-variant-caps: small-caps; }
#example2 { font-variant-caps: small-caps; font-feature-settings: 'smcp' 0; }
对于不支持小型大写字母的字体，#example1和#example2都应以合成小型大写字母渲染。然而，对于支持小型大写字母的字体，#example1应以原生小型大写字母渲染，而#example2则应不显示任何小型大写字母（无论是原生的还是合成的）。
为了匹配周围文本，当启用这些特性时，字体可能会为无大小写的字符提供替代字形，但当用户代理模拟小型大写字母时，不能尝试为被认为无大小写的代码点模拟替代字形。
启用小型大写字母、全小型大写字母时的无大小写字符
如果某字体不支持‘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’属性使用的转换匹配。
作为最后的手段，可以用正常字体中的未缩放大写字母字形替换小型大写字体中的字形，使文本全部以大写字母显示。
在包含大量首字母缩略词的文本中使用小型大写字母以提高可读性
带有小型大写字母的首行引用呈斜体显示：
blockquote { font-style: italic; }
blockquote:first-line { font-variant: small-caps; }
<blockquote>I'll be honor-bound to slap them like a haddock.</blockquote>
| 名称： | font-variant-numeric |
| 值： | normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
指定对数字形式的控制。下面的示例展示了如何组合这些值以影响支持这些特性的字体呈现表格数据。在正常段落文本中使用比例数字，而在表格数字中使用表格数字以使数字列正确对齐：
使用数字样式
可能的组合：
<numeric-figure-values> = [ lining-nums | oldstyle-nums ]
<numeric-spacing-values> = [ proportional-nums | tabular-nums ]
<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]
各个值的含义如下：
对于‘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>牛排腌料：</h4>
<ul>
<li><span class="amount">2</span> 汤匙橄榄油</li>
<li><span class="amount">1</span> 汤匙柠檬汁</li>
<li><span class="amount">1</span> 汤匙酱油</li>
<li><span class="amount">1 1/2</span> 汤匙干洋葱碎</li>
<li><span class="amount">2 1/2</span> 茶匙意大利调味料</li>
<li>盐和胡椒</li>
</ul>
<p>将肉与腌料混合并盖上放入冰箱中腌制数小时或过夜。</p>
注意，分数特性仅应用于数值而不是整个段落。字体通常使用基于斜杠（‘/’）字符的上下文规则实现此特性。因此，它不适合作为段落级样式使用。
| 名称： | font-variant-east-asian |
| 值： | normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
允许控制东亚文本中的字形替换和大小调整。
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]
各个值的含义如下：
各种JIS变体反映了不同日本国家标准中定义的字形形式。字体通常包含最近国家标准定义的字形，但有时需要使用旧的变体，例如匹配标牌时。
‘simplified’和‘traditional’值允许控制字符的字形形式，这些字符在一段时间内被简化，但在某些情况下仍然使用较旧的传统形式。具体的字符和字形形式的集合会根据字体的设计背景有所不同。
| 名称： | 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 ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [ sub | super ] ] |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | 查看个别属性 |
| 媒体： | 视觉 |
| 计算值： | 查看个别属性 |
| 可动画： | 查看个别属性 |
‘font-variant’属性是所有字体变体子属性的缩写。值‘normal’会将‘font-variant’的所有子属性重置为它们的初始值。值‘none’会将‘font-variant-ligatures’设置为‘none’并重置所有其他字体特性属性为初始值。像其他缩写一样，使用‘font-variant’会将未指定的‘font-variant’子属性重置为它们的初始值。它不会重置‘font-feature-settings’的值。
| 名称： | font-feature-settings |
| 值： | normal | <feature-tag-value> # |
| 初始值： | normal |
| 适用于： | 所有元素 |
| 继承： | 是 |
| 百分比： | N/A |
| 媒体： | 视觉 |
| 计算值： | 按指定计算 |
| 可动画： | 否 |
此属性提供对OpenType字体特性的低级控制。它旨在为一些特定的使用场景提供对不常用字体特性的访问。
作者通常应尽可能使用‘font-variant’及其相关子属性，仅在特殊情况下使用此属性来访问唯一能实现某个功能的特定字体特性。
/* 启用小型大写字母并使用第二个花体替代 */ font-feature-settings: "smcp", "swsh" 2;
值‘normal’表示不会因为此属性而发生字形选择或位置的变化。
特性标签值具有以下语法：
<feature-tag-value> = <string> [ <integer> | on | off ]?
<string>是区分大小写的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: "dlig" 1; /* dlig=1 启用可选连字 */ font-feature-settings: "smcp" on; /* smcp=1 启用小型大写字母 */ font-feature-settings: 'c2sc'; /* c2sc=1 启用大写字母转小写字母 */ font-feature-settings: "liga" off; /* liga=0 禁用常用连字 */ font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 启用表格数字和历史形式 */ font-feature-settings: "tnum" "hist"; /* 无效，需要逗号分隔的列表 */ font-feature-settings: "silly" off; /* 无效，标签过长 */ font-feature-settings: "PKRN"; /* PKRN=1 启用自定义特性 */ font-feature-settings: dlig; /* 无效，标签必须是字符串 */
当指定的值超出字体支持的范围时，行为明确未定义。对于布尔型特性，通常这些值会启用该特性。对于非布尔型特性，超出范围的值通常等同于值0。然而，在这两种情况下，确切的行为将取决于字体的设计方式（特别是用于定义该特性的查找类型）。
虽然特定为OpenType特性标签定义，但其他支持字体特性的现代字体格式的特性标签将来可能会被添加。可能的情况下，为其他字体格式定义的特性应尽量遵循已注册的OpenType标签的模式。
下面的日文文本将使用半宽假名字符渲染：
body { font-feature-settings: "hwid"; /* 半宽OpenType特性 */ }
<p>毎日カレー食べてるのに、飽きない</p>
如前一节所述，字体特性可以通过多种方式启用，既可以通过在样式规则中使用‘font-variant’或‘font-feature-settings’，也可以在@font-face规则内定义。这些设置的合并解析顺序如下。通过CSS属性定义的特性是在布局引擎默认特性之上应用的。
对于OpenType字体，用户代理必须启用OpenType文档中为特定脚本和书写模式定义的默认特性。默认情况下，必须启用必需的连字、常见连字和上下文形式（OpenType特性：rlig,
liga, clig, calt），以及本地化形式（OpenType特性：locl）和显示组合字符和标记所需的特性（OpenType特性：ccmp, mark, mkmk）。这些特性必须始终启用，即使‘font-variant’和‘font-feature-settings’属性的值为‘normal’。只有在作者明确覆盖时，个别特性才会被禁用，例如当‘font-variant-ligatures’设置为‘no-common-ligatures’时。对于处理复杂脚本（如阿拉伯语[ARABIC-TYPO]、高棉语或天城文）需要其他特性。对于垂直文本中的正文字，必须启用垂直替代（OpenType特性：vert）。
常规和字体特定的字体特性属性设置按以下顺序解析，按优先级升序排列。此顺序用于构建影响给定文本运行的字体特性组合列表。
@font-face规则定义，则该规则中@font-face规则中的font-feature-settings描述符隐含的字体特性。
font-variant’属性的值、相关的‘font-variant’子属性和使用OpenType特性的任何其他CSS属性隐含的字体特性（例如‘font-kerning’属性）。
font-variant’或‘font-feature-settings’以外的属性确定的特性设置。例如，设置非默认值的‘letter-spacing’属性将禁用常见连字。
font-feature-settings’属性的值隐含的字体特性。
这种排序允许作者在@font-face规则中为字体设置一组默认设置，然后通过特定元素的属性设置覆盖它们。常规属性设置覆盖@font-face规则中的设置，低级字体特性设置覆盖‘font-variant’属性设置。
在字体特性设置的组合列表中，如果同一特性包含多个值，则使用最后一个值。当字体不支持给定的字体特性时，文本会按该字体特性未启用的方式进行渲染；不会发生字体回退，也不会尝试合成该特性，除非在特定属性中明确定义。
使用以下样式时，数字在段落中以比例形式呈现，但在价格表中以表格形式显示：
body {
font-variant-numeric: proportional-nums;
}
table.prices td {
font-variant-numeric: tabular-nums;
}
@font-face 规则的内容可以通过以下 CSS 对象模型扩展进行访问。
CSSFontFaceRule 接口CSSFontFaceRule 接口表示一个 @font-face 规则。
interface CSSFontFaceRule : CSSRule {
readonly attribute CSSStyleDeclaration style;
};
本附录作为其他章节中描述的一些问题和情况的背景信息，仅供参考。
CSS 中的字体属性设计为与底层字体格式无关；它们可以用于指定位图字体、Type1 字体、SVG 字体以及常见的 TrueType 和 OpenType 字体。但是 TrueType 和 OpenType 格式的某些方面通常会引起作者的困惑，并给不同平台的实现者带来挑战。
TrueType 由 Apple 最初开发 [[TRUETYPE]]，作为用于屏幕和打印的轮廓字体格式。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 字体功能支持，而在 Mac OS X 下则使用 OpenType 和 AAT 字体功能。
font-variant’ 描述符由于缺乏实现，已移至 CSS Fonts 4font-feature-values’ at-rule 已移至 CSS Fonts 4，因缺乏实现font-language-override’ 属性移至 CSS Fonts 4font-feature-settings’ 的交互font-synthesis’ 不会被 ‘font’ 速记重置font-variant-position’ 值被遗漏到
‘‘font-variant’’ 速记我们要感谢 Tal Leming、Jonathan Kew、Ken Lunde 和 Christopher Slye 对我们的帮助和反馈。John Hudson 花时间解释了 OpenType
语言标签的细微差别，并提供了在拜占庭印章上显示文本的字符变体用法示例。Ken Lunde 和 Eric Muller 对 CJK OpenType 功能和 Unicode 变体选择器提供了宝贵的反馈。支持通过 ‘font-variant’
子属性的字体功能的想法来自 Håkon Wium Lie、Adam Twardoch 和 Tal Leming。Elika Etemad 提供了 @font-feature-values 规则的一些初步设计理念。感谢
House Industries 允许在任意连字示例中使用 Ed Interlock。
特别感谢 Robert Bringhurst 对《The Elements of Typographic Style》这本书的卓越贡献。
一致性要求通过描述性断言和 RFC 2119 术语的组合来表达。规范中的关键字 “MUST”、 “MUST NOT”、 “REQUIRED”、 “SHALL”、 “SHALL NOT”、 “SHOULD”、 “SHOULD NOT”、 “RECOMMENDED”、 “MAY” 和 “OPTIONAL” 应按照 RFC 2119 的描述进行解释。然而，为了可读性，这些词在本规范中不会全部使用大写字母。[RFC2119]
本规范的所有文本都是规范性内容，除非明确标记为非规范性内容、示例和注释。
这是一个信息性示例。
信息性注释以 “Note” 一词开头，并通过 class="note" 与规范性文本区分开，如下所示：
注：这是一个信息性注释。
对 CSS Fonts Level 3 模块的符合性定义了三类符合性标准：
如果样式表中使用本模块中定义的属性的声明，其值符合通用 CSS 语法和本模块中给出的每个属性的单独语法，则该样式表符合 CSS Fonts Level 3 模块。
如果渲染器除了按照适当的规范定义解释样式表外，还支持 CSS Fonts Level 3 模块定义的所有功能，正确解析并相应地渲染文档，则渲染器符合 CSS Fonts Level 3 模块。 然而，由于设备限制导致 UA 无法正确渲染文档，这并不意味着 UA 不符合规定。（例如，UA 不需要在黑白显示器上渲染颜色。）
如果创作工具编写的样式表在语法上符合通用 CSS 语法和本模块中每个功能的单独语法，并且符合本模块中描述的样式表的所有其他一致性要求，则创作工具符合 CSS Fonts Level 3 模块。
为了让作者能够利用向前兼容的解析规则来分配后备值，CSS 渲染器必须将没有可用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效（并 适当地忽略）。特别是，用户代理不得在单个多值属性声明中选择性地忽略不受支持的组件值并接受支持的值：如果任何值被视为无效（因为不受支持的值必须是），CSS 要求忽略整个声明。
为了避免与未来的 CSS 功能发生冲突，CSS2.1 规范保留了一种带前缀的语法，用于对 CSS 的专有和实验扩展。
在规范达到 W3C 过程中候选推荐阶段之前，所有 CSS 功能的实现都被视为实验性实现。CSS 工作组建议实现使用带有供应商前缀的语法来处理这些功能，包括 W3C 工作草案中的功能。这样可以避免与草案中的未来更改发生不兼容的情况。
一旦规范达到候选推荐阶段，就可以进行非实验性实现，并且实施者应发布任何他们能够根据规范证明正确实施的 CR 级功能的无前缀实现。
为了建立和维护 CSS 在各实现之间的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前向 W3C 提交实现报告（如果需要，还需提交该实现报告中使用的测试用例）。提交给 W3C 的测试用例需经过 CSS 工作组的审查和修正。
有关提交测试用例和实现报告的更多信息，请访问 CSS 工作组网站 https://www.w3.org/Style/CSS/Test/。问题应发送到 public-css-testsuite@w3.org 邮件列表。
@font-face, 4.1.
| 属性 | 值 | 初始值 | 应用于 | 继承性 | 百分比 | 媒体 |
|---|---|---|---|---|---|---|
| font | [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | 参见各个属性 | 所有元素 | 是 | 参见各个属性 | 视觉 |
| font-family | [ <family-name> | <generic-family> ] # | 依赖于用户代理 | 所有元素 | 是 | 不适用 | 视觉 |
| font-feature-settings | normal | <feature-tag-value> # | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-kerning | auto | normal | none | auto | 所有元素 | 是 | 不适用 | 视觉 |
| font-size | <absolute-size> | <relative-size> | <length-percentage> | medium | 所有元素 | 是 | 参考父元素的字体大小 | 视觉 |
| font-size-adjust | none | <number> | none | 所有元素 | 是 | 不适用 | 视觉 |
| font-stretch | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-style | normal | italic | oblique | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-synthesis | none | [ weight || style ] | weight style | 所有元素 | 是 | 不适用 | 视觉 |
| 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 ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby || [ sub | super ] ] | normal | 所有元素 | 是 | 参见各个属性 | 视觉 |
| font-variant-caps | normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-variant-east-asian | normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ] | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-variant-ligatures | normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ] | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-variant-numeric | normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ] | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-variant-position | normal | sub | super | normal | 所有元素 | 是 | 不适用 | 视觉 |
| font-weight | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | 所有元素 | 是 | 不适用 | 视觉 |
| 描述符 | 值 | 初始值 |
|---|---|---|
| font-family | <family-name> | 不适用 |
| font-feature-settings | normal | <feature-tag-value> # | normal |
| font-stretch | normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | normal |
| font-style | normal | italic | oblique | normal |
| font-weight | normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal |
| src | [ <url> [format(<string> #)]? | <font-face-name> ] # | 不适用 |
| unicode-range | <urange> # | U+0-10FFFF |