W3C

CSS 字体模块级别 3

W3C 推荐标准 2018 年 9 月 20 日

此版本
https://w3org.cn/TR/2018/REC-css-fonts-3-20180920/
最新版本
https://w3org.cn/TR/css-fonts-3/
最新编辑草案
https://drafts.csswg.org/css-fonts/
先前版本
https://w3org.cn/TR/2018/PR-css-fonts-3-20180814/
https://w3org.cn/TR/2018/CR-css-fonts-3-20180626/
https://w3org.cn/TR/2018/CR-css-fonts-3-20180315/
https://w3org.cn/TR/2013/CR-css-fonts-3-20131003/
问题列表
GitHub 上的 css-fonts-3 问题
讨论
在 GitHub 上(首选),或发送邮件至 www-style@w3.org,主题行请包含“[css-fonts] … 消息主题 …”(归档
测试套件
https://test.csswg.org/harness/results/css-fonts-3_dev/grouped/
编辑
John Daggett(特邀专家)
Myles C. Maxfield(Apple Inc.)
Chris Lilley(W3C)

请查阅 勘误表,了解发布以来报告的所有错误或问题。


摘要

本 CSS3 模块描述了如何指定字体属性以及如何动态加载字体资源。本规范的内容整合了之前分为 CSS3 字体CSS3 网络字体模块的内容。关于字体加载事件的描述已移至 CSS 字体加载模块。

本文档状态

本节描述了本文件发布时的状态。其他文件可能会取代本文件。当前的 W3C 出版物列表和本技术报告的最新修订版可在 W3C 技术报告索引(https://w3org.cn/TR/)中找到。

本文件已由 W3C 会员、软件开发人员以及其他 W3C 小组和利害关系方审阅,并由总干事认可为 W3C 推荐标准。这是一个稳定的文档,可以用作参考材料或从另一个文档中引用。W3C 发布推荐标准的角色是引起对规范的关注并促进其广泛部署。这增强了 Web 的功能和互操作性。

本文档由 CSS 工作组编写,并作为 W3C 推荐标准发布。

本文件由在 W3C 专利政策下运作的小组编写。W3C 维护一份与该组交付成果相关的公开专利披露列表;该页面还包含披露专利的指南。任何对个人认为包含基本权利要求 (Essential Claim) 的专利有实际了解的个人,必须按照 W3C 专利政策第 6 节披露相关信息。

本文件受 2018 年 2 月 1 日 W3C 过程文档 的约束。

提供有测试套件实现报告

1. 简介

字体提供了包含字符视觉表现的资源 [CHARMOD][UNICODE]。在最基础的层面,它包含将字符编码映射到代表这些字符的形状(称为字形)的信息。共享共同设计风格的字体通常被归类为字体族,并由一组标准字体属性进行分类。在一个字体族内,给定字符显示的形状可能会因笔画粗细、倾斜度或相对宽度等因素而异。单个字体字样由这些属性的独特组合来描述。对于给定的文本范围,CSS 字体属性用于选择字体族以及该族内特定的字体字样,以便在渲染该文本时使用。作为一个简单的例子,要使用 Helvetica 的粗体形式,可以使用

body {
    font-family: Helvetica;
    font-weight: bold;
}

字体资源可以安装在运行用户代理的系统本地,也可以是可下载的。对于本地字体资源,描述信息可以直接从字体资源中获取。对于可下载的字体资源(有时称为网络字体),描述信息则包含在对字体资源的引用中。

字体族通常不会为字体属性的每一种可能变体都包含单独的字样。CSS 字体选择机制描述了如何将一组给定的 CSS 字体属性与单个字体字样进行匹配。

2. 排版背景

本节是非规范性的。

全球的排版传统各不相同,因此没有一种统一的方法可以对所有语言和文化的字体进行分类。即使是常见的拉丁字母,也存在广泛的变体

variations in glyphs for a single character

一个字符,多个字形变体

字母形式解剖结构的差异是区分字体的一种方式。对于拉丁字体,字符主笔画末端的装饰(即衬线)可以将一种字体与无衬线字体区分开来。在非拉丁字体中,也存在类似对比,区分带锥形笔画的字体与主要使用均匀笔画的字体

serif vs. non-serifs

带衬线和不带衬线的字母形式

serif vs. non-serifs for japanese

日文字体的类似分组

字体包含字母形式以及将字符映射到这些字母形式所需的数据。通常这可能是一对一的简单映射,但也存在更复杂的映射。使用组合附加符号会为底层字母形式创建许多变体

diacritic marks

带附加符号的变体

字符序列可以由单个字形表示,这称为连字

example of a fi ligature

连字示例

基于文本上下文的视觉转换通常是欧洲语言中的一种风格选项。它们是正确渲染诸如 [ARABIC-TYPO] 之类语言所必需的,下方的 lam 和 alef 字符在连续出现时*必须*进行组合

lam alef ligature

必须使用的阿拉伯语连字

这些塑造转换的相对复杂性需要字体内部包含额外的数据。

具有各种风格变体的一组字体字样通常被归类在一起组成字体族。在最简单的情况下,常规字样辅以粗体和斜体字样,但可以进行更广泛的组合。字母形式笔画的厚度(即粗细)和字母形式的整体比例(即宽度)是最常见的变化。在下例中,每个字母使用了 Univers 字体族内不同的字体字样。宽度从上到下增加,粗细从左到右增加

various width and weight variations within a single family

单一字体族内的粗细和宽度变体

创建支持多种文字的字体是一项艰巨的任务;设计师需要理解围绕不同文字使用排版的文化传统,并构思出某种程度上共享共同主题的字母形式。许多语言通常共享一种通用文字,而每种语言在字母形式上可能存在显著的风格差异。例如,阿拉伯文字用于波斯语和乌尔都语时,其字母形式表现出显著且系统的差异;西里尔字母用于塞尔维亚语和俄语时也是如此。

字体的 字符映射表 定义了该字体从字符到字形的映射。如果文档包含字体族列表中所含字体不支持的字符,用户代理可以使用 系统字体回退 程序来定位支持该字符的合适字体。如果找不到合适的字体,用户代理将渲染某种形式的“缺失字形”字符。当指定的字体族列表未包含支持给定字符的字体时,系统回退就会发生。

尽管字体的 字符映射表 将给定字符映射到该字符的字形,但现代字体技术(如 OpenType [OPENTYPE] 和 AAT (Apple Advanced Typography) [AAT-FEATURES])提供了根据特性设置将字符映射到不同字形的方法。这些格式的字体允许将这些特性嵌入到字体本身中,并由应用程序控制。可以通过这种方式指定的常见排版特性包括连字、花体、上下文替换、比例数字和等宽数字、自动分数等,仅举几例。有关 OpenType 特性的视觉概述,请参见 [OPENTYPE-FONT-GUIDE]

3. 基本字体属性

用于渲染字符的特定字体字样由应用于给定元素的字体族和其他字体属性决定。这种结构允许设置彼此独立地变化。

3.1. 字体族:font-family 属性

名称font-family
[ <family-name> | <generic-family> ] #
初始值取决于用户代理
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

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

设计师应注意,CSS 中用于选择的字体属性定义明确并非旨在定义字体分类法。字体设计师对字体族的设想通常可以扩展到一组不仅在粗细、宽度和倾斜度等标准轴上变化,还在其他轴上变化的字样。一个字体族可能扩展到既包含衬线字样集合,也包含无衬线字样集合,或者沿着该字体族独有的轴变化。CSS 字体选择机制仅仅提供了一种在必要时确定“最接近”替代品的方法。

与其他 CSS 属性不同,组件值是一个以逗号分隔的列表,表示多个备选方案。用户代理会遍历字体族名称列表,直到匹配到包含待渲染字符字形的可用字体。这考虑了各平台可用字体的差异以及各字体支持字符范围的差异。

字体族名称仅指定赋予一组字体字样的名称,而不指定单个字样。例如,给定以下可用字体,Futura 将匹配,但 Futura Medium 不会

family and face names

字体族和单个字样名称

考虑下例

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

如果 Helvetica 可用,它将在渲染时使用。如果 Helvetica 和 Verdana 都不存在,则将使用用户代理定义的无衬线字体。

有两种类型的字体族名称

<family-name>
所选字体族的名称,如前例中的 Helvetica 或 Verdana。
<generic-family>
定义了以下通用字体族关键字:‘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 或文档编码无关

examples of localized family names

本地化字体族名称

本地化字体族名称匹配的细节以及相应的大小写敏感性问题将在下文的 字体匹配 部分中描述。

3.1.1. 通用字体族

对于所有 CSS 实现,所有五个通用字体族必须始终至少产生一个匹配的字体字样。然而,通用字体族可能是复合字样(根据字符的 Unicode 范围、包含元素的语言、用户偏好和系统设置等因素具有不同的字样)。它们也不保证总是彼此不同。

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

serif

衬线字体代表了一种文字的正式文本风格。这通常指但不限于具有完成笔画、向外扩展或逐渐变细的末端,或具有实际衬线结尾(包括粗衬线)的字形。衬线字体通常是比例间距的。与来自 ‘sans-serif’ 通用字体族的字体相比,它们通常显示出粗细笔画之间更大的差异。CSS 使用术语 ‘serif’ 来应用于任何文字的字体,尽管对于特定文字可能有更熟悉的名称,如明朝体(日文)、宋体(中文)、Batang(韩文)。对于阿拉伯语,Naskh 风格更因其排版角色而非实际设计风格而对应于 ‘serif’。任何被如此描述的字体均可用于表示通用 ‘serif’ 族。

sample serif fonts

衬线字体样本

sans-serif

无衬线字体中的字形(按 CSS 中的术语使用)通常对比度较低(垂直和水平笔画的粗细接近),并具有平坦的笔画结尾——没有向外扩展、交叉笔画或其他装饰。无衬线字体通常是比例间距的。与来自 ‘serif’ 族的字体相比,它们通常在粗细笔画之间差异很小。CSS 使用术语 ‘sans-serif’ 来应用于任何文字的字体,尽管对于特定文字可能有更熟悉的名称,如哥特体(日文)、黑体(中文)或 Gulim(韩文)。任何被如此描述的字体均可用于表示通用 ‘sans-serif’ 族。

sample sans-serif fonts

无衬线字体样本

cursive

手写体字体中的字形通常使用更随意的书写风格,其结果看起来更像是手写的钢笔或毛笔字,而不是印刷的字母。CSS 使用术语 ‘cursive’ 来应用于任何文字的字体,尽管字体名称中也使用了诸如 Chancery、Brush、Swing 和 Script 等其他名称。

sample cursive fonts

手写体字体样本

fantasy

装饰体字体主要指装饰性或表现性的字体,包含字符的装饰性或表现性表示。这些不包括不代表实际字符的 Pi 或图片字体。

sample fantasy fonts

装饰体字体样本

monospace

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

sample monospace fonts

等宽字体样本

3.2. 字体粗细:font-weight 属性

名称font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值数值粗细(见说明)
可动画作为 字体粗细

font-weight’ 属性指定了字体中字形的粗细,即它们的黑色程度或笔画厚度。

值的含义如下:

100 至 900
这些值构成一个有序序列,其中每个数字表示的粗细至少与前一个数字一样重。它们大致对应于以下常用的粗细名称
normal
与 ‘400’ 相同。
bold
与 ‘700’ 相同。
bolder
指定比继承值更粗的权重。
lighter
指定比继承值更细的权重。

使用非九级比例的字体格式应将其比例映射到 CSS 比例上,使得 400 大致对应于标记为 Regular、Book、Roman 的字样,而 700 大致对应于标记为 Bold 的字样。或者权重可以根据样式名称推断,这些名称大致对应于上述比例。比例是相对的,因此粗细值较大的字样绝不能显得更细。如果使用样式名称来推断权重,则应注意处理不同区域设置中样式名称的变化。

很多时候,特定的字体族只有少数几种权重可用。当指定的权重没有对应字样时,将使用相近权重的字样。通常,粗体权重映射到更重的字样,细体权重映射到更细的字样(有关精确定义,请参阅下文的 字体匹配部分)。这里的示例说明了不同权重下所使用的字样,灰色表示该权重的字样不存在,因此使用了相近权重的字样

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 权重字样的字体族的权重映射

虽然排版师并不太喜欢这种做法,但对于缺乏实际粗体字样的字体,用户代理通常会合成粗体字样。出于样式匹配的目的,这些字样必须被视为存在于该字体族中。作者可以使用 ‘font-synthesis’ 属性显式禁用此行为。

bolder’ 和 ‘lighter’ 的指定值表示相对于父元素权重的相对权重。计算出的权重基于继承的 ‘font-weight’ 值,使用下表计算。

‘bolder’ 与 ‘lighter’ 的含义bolderlighter
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

上表相当于在包含常规和粗体字样,以及细体和重体字样的字体族中,选择下一个相对更粗或更细的字样。希望精确控制给定元素所用权重值的作者可以使用数值代替相对权重。

3.3. 字体宽度:font-stretch 属性

名称font-stretch
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画作为 字体宽度

font-stretch’ 属性从字体族中选择常规、压缩或扩展的字样。绝对关键字值具有以下排序,从最窄到最宽

当给定宽度不存在字样时,常规或压缩值映射到更窄的字样,否则映射到更宽的字样。反之,扩展值映射到更宽的字样,否则映射到更窄的字样。下图显示了九种 font-stretch 属性设置如何影响包含多种宽度的字体族的字体选择,灰色表示不存在该宽度的字样,因此替换了不同的宽度

width mappings for a family with condensed, normal and expanded faces

具有压缩、常规和扩展宽度字样的字体族的宽度映射

字体宽度动画:字体宽度按离散步骤插值。插值过程就像有序值是等距实数一样。插值结果四舍五入到最接近的值,两个值之间恰好一半的值四舍五入到上述列表中较后的值。

3.4. 字体样式:font-style 属性

名称font-style
normal | italic | oblique
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

font-style’ 属性允许选择斜体或倾斜字样。斜体形式本质上通常是手写的,而倾斜字样通常是常规字样的倾斜版本。倾斜字样可以通过人为倾斜常规字样的字形来模拟。比较灰色显示的人为倾斜的 Palatino ‘a’ 和 Baskerville ‘N’ 与实际斜体版本的区别

artificial sloping vs. real italics

人为倾斜与真实斜体的对比

值的含义如下:

normal
选择被归类为常规的字样,即既不是斜体也不是倾斜的字样
italic
选择标记为斜体的字体,如果不存在,则选择倾斜字体
oblique
选择标记为倾斜的字体,如果不存在,则选择斜体字体

如果没有斜体或倾斜字样可用,可以通过对非倾斜字样进行人为倾斜操作来合成倾斜字样。使用这些人为倾斜字样可以使用 ‘font-synthesis’ 属性禁用。有关倾斜操作的细节未明确定义。

作者还应意识到,合成方法可能不适用于西里尔字母等文字,因为其斜体形式在形状上非常不同。始终使用实际的斜体字体优于依赖合成版本。

许多文字缺乏在常规面渲染的文本中混合手写形式的传统。中文、日文和韩文字体几乎总是缺乏斜体或倾斜字样。支持混合文字的字体有时会从斜体字样支持的字形集中省略阿拉伯语等特定文字。用户代理在实现 系统字体回退 支持时,在对字样进行 字符映射表 假设时应非常小心。

3.5. 字体大小:font-size 属性

名称font-size
<absolute-size> | <relative-size> | <length-percentage>
初始值medium
应用于所有元素
可继承
百分比参考父元素的字体大小
媒体视觉
计算值绝对长度
可动画作为 长度

此属性指示字体的期望字形高度。对于可缩放字体,font-size 是应用于字体 EM 单位的比例因子。(请注意,某些字形可能会超出其 EM 框。)对于不可缩放字体,font-size 被转换为绝对单位,并与声明的字体 ‘font-size’ 进行匹配,两者的匹配值使用相同的绝对坐标空间。值具有以下含义

<absolute-size>
<absolute-size> 关键字指代用户代理计算并保存的字体大小表中的条目。可能的值为

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

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

[ larger | smaller ]

例如,如果父元素的字体大小为 ‘medium’,则 ‘larger’ 值将使当前元素的字体大小变为 ‘large’。如果父元素的大小不接近表条目,用户代理可以自由在表条目之间进行插值或四舍五入到最接近的条目。如果数值超出了关键字,用户代理可能需要外推表值。

<length-percentage>

长度值 [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 h5h4h3h2h1
下表给出了将绝对大小映射到 HTML 标题和绝对字体大小的用户代理指南。‘medium’ 代表用户首选的字体大小,作为参考的中间值。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 }

3.6. 相对调整:font-size-adjust 属性

名称font-size-adjust
none | <number>
初始值none(无)
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画作为 数字

对于任何给定的字体大小,文本的表现大小和可读性在不同字体之间各不相同。对于区分大小写字母的文字(如拉丁文或西里尔文),小写字母相对于其大写字母对应物的相对高度是决定可读性的一个因素。这通常被称为 纵横比值 (aspect value)。精确定义为:字体的 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。请注意下半部分中较小的文本在每一行中是如何保持相对清晰的。

text with and without 'font-size-adjust'

使用和不使用 ‘font-size-adjust’ 的文本

此属性允许作者为元素指定一个 纵横比值,它将有效地保持首选字体的 x-height,无论它是否被替换。值具有以下含义

none(无)
不保留字体的 x-height。
<number>(数字)
指定在下述公式中用于计算调整后字体大小的 纵横比值
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

负值是无效的。

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

font-size-adjust’ 的值影响 ‘font-size’ 的使用值,但不影响计算值。它影响基于 首个可用字体 字体度量的相对单位的大小,如 exch,但不影响 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 被用来确定字体的 纵横比值。两个 span 的 ‘font-size’ 相同,但仅为右侧 span 指定了 ‘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 with an <i>aspect value</i> of 0.5

纵横比值为 0.5 的 Futura

右侧的框比左侧的稍微大一点,所以这个字体的 纵横比值 小于 0.5。调整该值直到框对齐。

3.7. 复合字体属性:font 属性

名称字体 (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’ 复合属性中使用

<font-variant-css21> = [normal | small-caps]

此属性的语法基于传统的排版简写记法,用于设置多个与字体相关的属性。

font’ 属性的所有子属性首先被重置为它们的初始值,包括上述列出的属性加上 ‘font-size-adjust’、‘font-kerning’、‘font-variant’ 的所有子属性以及 ‘font-feature-settings’,但*不包括* ‘font-synthesis’。然后,在 ‘font’ 复合属性中被赋予显式值的属性被设置为这些值。有关允许值和初始值的定义,请参阅先前定义的属性。由于向后兼容性的原因,无法使用 ‘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’)。由此可知,关键字 ‘normal’ 适用于其余两个属性:‘font-style’ 和 ‘font-weight’。

第六个规则设置 ‘font-style’、‘font-stretch’、‘font-size’ 和 ‘font-family’,其他字体属性被设置为它们的初始值。

由于 ‘font-stretch’ 属性未在 CSS 2.1 中定义,当在 ‘font’ 规则中使用 ‘font-stretch’ 值时,作者应包含一个与旧用户代理兼容的额外版本

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

以下值指代系统字体

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

系统字体只能作为一个整体来设置;也就是说,字体族、大小、粗细、样式等都是同时设置的。如果需要,这些值随后可以单独修改。如果特定平台上不存在具有所指示特征的字体,用户代理应智能替换(例如,‘small-caption’ 字体可以使用 ‘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
}

3.8. 控制合成字体:font-synthesis 属性

名称font-synthesis
none | [ weight || style ]
初始值weight style
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

此属性控制当字体族缺乏粗体或斜体字样时,是否允许用户代理合成粗体或倾斜字体字样。如果未指定 ‘weight’,用户代理不得合成粗体字样;如果未指定 ‘style’,用户代理不得合成斜体字样。‘none’ 值禁止所有合成字样。

下方的样式规则禁用了人为倾斜阿拉伯语的使用

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

4. 字体资源

4.1. @font-face 规则

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

@font-face’ 规则由 ‘@font-face’ at-关键字后跟一个描述符声明块组成。就语法而言,本规范定义了以下产生式

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’ 规则定义了一组可供包含这些规则的文档使用的字体。当执行字体匹配时,将首先考虑使用这些规则定义的字体,然后再考虑系统上的其他可用字体。

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

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

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

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

名称font-family
<family-name>
初始值 不适用

此描述符定义了将在所有 CSS 字体族名称匹配中使用的字体族名称。它是 ‘@font-face’ 规则生效所必需的。它覆盖了底层字体数据中包含的字体族名称。如果字体族名称与给定用户环境中可用的字体族相同,它将有效地隐藏该底层字体以供使用该样式表的文档使用。这允许网页作者自由选择字体族名称,而不必担心与给定用户环境中存在的字体族名称发生冲突。同样,不得使用给定字体族名称的平台替换。

4.3. 字体引用:src 描述符

名称src
[ <url> [format(<string> #)]? | <font-face-name> ] #
初始值 不适用

此描述符指定包含字体数据的资源。它是 ‘@font-face’ 规则生效所必需的。其值是一个优先的、以逗号分隔的外部引用或本地安装的字体字样名称列表。当需要某种字体时,用户代理会遍历列出的引用集,使用第一个能成功激活的引用。包含无效数据或未找到的本地字体字样的字体将被忽略,用户代理会加载列表中的下一个字体。

与其他 CSS 中的 URL 一样,URL 可能是相对的,在这种情况下,它相对于包含 ‘@font-face’ 规则的样式表的位置进行解析。在 SVG 字体的情况下,URL 指向包含 SVG 字体定义的文档内的元素。如果省略元素引用,则隐含对第一个定义字体的引用。类似地,可以包含一个以上字体的字体容器格式必须为给定的 ‘@font-face’ 规则加载一个且仅加载一个字体。片段标识符用于指示要加载的字体;这些使用 [RFC8081] 中定义的字体 PostScript 名称。符合标准的用户代理如果片段标识符未知或不支持,则必须跳过下载该字体资源。例如,不支持 OpenType 集合的旧用户代理将跳过到列表中的下一个 url。

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' */

外部引用由 URL 组成,后跟一个可选提示,描述该 URL 引用的字体资源的格式。格式提示包含以逗号分隔的格式字符串列表,这些字符串表示众所周知的字体格式。符合标准的用户代理如果格式提示仅指示不支持或未知的字体格式,则必须跳过下载该字体资源。如果未提供格式提示,用户代理应下载字体资源。

/* load WOFF2 font if possible, otherwise WOFF, else use OpenType font */
@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");
}

本规范定义的格式字符串

字符串 (String)字体格式常见扩展名
"woff" WOFF 1.0(Web 开放字体格式) .woff
"woff2" WOFF 2.0(Web 开放字体格式) .woff2
"truetype" TrueType .ttf
"opentype" OpenType .ttf, .otf
"embedded-opentype" 嵌入式 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("")" 包围的唯一字体字样名称。该名称可以可选地括在引号中。如果未加引号,则应用未加引号的字体族名称处理惯例;名称必须是由 空白 分隔的标识符序列,并通过将标识符连接在一起并用单个空格分隔来转换为字符串。

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

对于 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 为 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;
  /* 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-stylefont-weightfont-stretch 描述符

名称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’ 规则中定义的常规字样显示

regular face display

然而,大多数用户代理中的斜体文本将使用常规字样的合成倾斜字形显示,因为没有定义单独的斜体字样

synthetic italics display

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

@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 具有常规粗细、常规宽度和斜体样式的样式属性。当显示斜体文本时,用户代理将使用此字体,因为它是斜体文本的最匹配项。因此,文本将显示使用由字体设计师设计的字形,而不是使用来自常规字样的合成倾斜字形

real italics display

有关用于选择字体族内特定字样的过程的更完整详情,请参见 字体匹配 部分。

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

名称unicode-range
<urange> #
初始值 U+0-10FFFF

此描述符定义了声明该字样的字体字样可能支持的 Unicode [UNICODE] 码点集。描述符值是一个以逗号分隔的 Unicode 范围 (<urange>) 值列表。这些范围的并集定义了一组码点,作为用户代理决定是否为给定的文本运行下载字体资源的提示。

每个 <urange> 值是一个 UNICODE-RANGE 标记,由 "U+" 或 "u+" 前缀后跟以下列出的三种形式之一的码点范围组成。不符合这些形式之一的范围无效,并将导致声明被忽略。

单个码点(例如 U+416)
一个 Unicode 码点,表示为一到六个十六进制数字
间隔范围(例如 U+400-4ff)
表示为两个以连字符分隔的 Unicode 码点,指示范围的包含开始和结束码点
通配符范围(例如 U+4??)
由尾随 ‘?’ 字符表示任何十六进制数字时所隐含的码点集定义

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

缺少初始数字(例如 "U+???")且用 ‘?’ 指定的通配符范围是有效的,等同于具有初始零数字的通配符范围(例如 "U+0???" = "U+0000-0FFF")。超出 Unicode 码点范围的通配符范围无效。因此,尾随 ‘?’ 通配符字符的最大数量为 5 个,尽管 UNICODE-RANGE 标记接受 6 个。

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

关联的字体可能不包含 ‘unicode-range’ 描述符定义的所有码点集的字形。当使用字体时,有效字符映射表 是 ‘unicode-range’ 定义的码点与字体 字符映射表 的交集。这允许作者以宽泛的范围定义支持的范围,而不必担心底层字体支持的精确码点范围。

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

具有相同族和样式描述符值,但具有不同 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-range。由于上述所有字符都在 U+0-5FF 范围内,用户代理下载该字体并使用该字体渲染文本。

接下来,考虑使用箭头字符 (⇨) 的文本

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

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

4.7. 字体特性:font-feature-settings 描述符

名称font-feature-settings
normal | <feature-tag-value> #
初始值 normal

此描述符定义了当由 @font-face 规则定义的字体被渲染时所应用的初始设置。它不影响字体选择。其值与下文定义的对应 font-feature-settings 属性的值相同,区别在于省略了 ‘inherit’ 值。当使用多个字体特性描述符或属性时,对文本渲染的累积影响将在下文的 字体特性解析 一节中详细说明。

4.8. 字体加载指南

@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;
}

在可下载字体可用之前加载文本内容的情况下,用户代理可以按照没有可下载字体资源时的效果渲染文本,或者使用回退字体透明地渲染文本,以避免因使用回退字体而产生的文本闪烁。如果字体下载失败,用户代理必须显示文本;仅仅留下透明文本被视为不符合规范的行为。建议作者在字体列表中使用与可下载字体度量标准高度匹配的回退字体,以尽可能避免大规模的页面重排。

4.9. 字体获取要求

对于字体加载,用户代理必须对 @font-face 规则中定义的 URL 使用 [FETCH] 规范中定义的潜在的 CORS 启用获取方法。获取时,用户代理必须使用“Anonymous”模式,将引用源(referrer)设置为样式表的 URL,并将来源(origin)设置为包含文档的 URL。

这对作者的意义在于,除非作者特别采取措施允许跨域加载,否则字体通常不会跨域加载。网站可以使用 Access-Control-Allow-Origin HTTP 标头显式允许字体数据的跨站加载。对于其他方案,除了潜在的 CORS 启用获取方法所允许的范围外,未定义也不要求其他允许跨域加载的显式机制。

对于下述示例,假设文档位于 https://example.com/page.html,且所有 URL 都链接到用户代理支持的有效字体资源。下文中使用 ‘src’ 描述符值定义的字体将被加载
/* same origin (i.e. domain, scheme, port match document) */
src: url(fonts/simple.woff);

/* data url's 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(https://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);

5. 字体匹配算法

以下算法描述了字体如何与单个文本运行关联。对于运行中的每个字符,都会选择一个字体族,并选定包含该字符字形的特定字体人脸(face)。

5.1. 字体族名称的大小写敏感性

作为下述字体匹配算法的一部分,用户代理必须将样式规则中使用的字体族名称与给定环境中可用字体的实际字体族名称,或与 @font-face 规则中定义的字体族名称进行匹配。用户代理必须使用 Unicode 规范 [UNICODE] 中概述的“默认无大小写匹配”算法,不区分大小写地匹配这些名称。该算法在标题为“默认大小写算法”的 3.13 节中有详细说明。具体而言,应用该算法时不得规范化涉及的字符串,也不得应用任何特定于语言的调整。此算法指定的大小写折叠方法使用 Unicode 字符数据库 [UNICODE] 中 CaseFolding.txt 文件中状态字段为 ‘C’ 或 ‘F’ 的大小写映射。

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

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

5.2. 匹配字体样式

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

某些遗留字体可能在 字符映射表 中包含给定字符,但缺乏正确渲染包含该字符的文本运行所需的成形信息(例如 OpenType 布局表Graphite 表)。

由基字符后跟一系列组合字符组成的码位序列的处理方式略有不同,请参阅下文关于 簇匹配 的一节。

对于此过程,给定字体族的 默认人脸(default face) 定义为所有字体样式属性均设置为其初始值时会选中的人脸。

  1. 使用给定元素的计算字体属性值,用户代理从 font-family 属性指定的第一个族名称开始。
  2. 如果族名称是通用族关键字,用户代理会查找要使用的适当字体族名称。用户代理可以根据包含元素的语言或字符的 Unicode 范围来选择要使用的通用字体族。
  3. 对于其他族名称,用户代理尝试在通过 @font-face 规则定义的字体中查找该族名称,然后在可用系统字体中查找,并使用上文所述的 不区分大小写的比较 匹配名称。在包含具有多个本地化字体族名称的字体的系统上,用户代理必须匹配这些名称中的任何一个,而无需考虑所使用的底层系统区域设置或平台 API。如果通过 @font-face 规则为给定人脸定义的字体资源不可用或包含无效字体数据,则该人脸应被视为在该族中不存在。如果通过 @font-face 规则定义的族中没有人脸存在,则该族应被视为缺失;在这种情况下,不得匹配具有相同名称的平台字体。
  4. 如果发生字体族匹配,用户代理将汇总该族中的字体人脸集合,然后使用下文给出的顺序根据其他字体属性将该集合缩小为单一人脸。在此步骤中,一组通过 @font-face 规则定义的、具有相同字体描述符值但 ‘unicode-range’ 值不同的字体人脸被视为单个 复合人脸(composite face)
    1. 首先尝试 font-stretch。如果匹配集合中包含宽度值与 font-stretch 值匹配的人脸,则从匹配集合中移除具有其他宽度值的人脸。如果没有与宽度值完全匹配的人脸,则使用最接近的宽度。如果 font-stretch 的值为 normal 或压缩值之一,则先检查更窄的宽度值,然后检查更宽的值。如果 font-stretch 的值是扩展值之一,则先检查更宽的值,然后检查更窄的值。通过此过程确定最接近的匹配宽度后,具有其他宽度的人脸将从匹配集合中移除。
    2. 接下来尝试 font-style。如果 font-style 的值为 ‘italic’,则先检查斜体(italic)人脸,然后是倾斜(oblique)人脸,最后是正常(normal)人脸。如果值为 ‘oblique’,则先检查倾斜人脸,然后是斜体人脸,最后是正常人脸。如果值为 normal,则先检查正常人脸,然后是倾斜人脸,最后是斜体人脸。具有其他样式值的人脸将从匹配集合中排除。用户代理被允许区分平台字体族中的斜体和倾斜人脸,但这并非必须,因此所有斜体或倾斜人脸都可以被视为斜体人脸。然而,在通过 @font-face 规则定义的字体族中,必须使用 font-style 描述符的值来区分斜体和倾斜人脸。对于缺乏任何斜体或倾斜人脸的字体族,如果 ‘font-synthesis’ 属性的值允许,用户代理可以创建人工倾斜人脸。
    3. 接下来匹配 font-weight,因此它总是会将匹配集合缩小为单个字体人脸。如果使用了更粗/更细的相对权重,则有效权重根据继承的权重值计算,如 font-weight 属性的定义中所述。给定所需的权重以及上述步骤后匹配集合中人脸的权重,如果有所需的权重,则该人脸匹配。否则,使用以下规则选择权重。
      • 一旦将字体族的粗细映射到 CSS 规模,缺失的粗细会按如下方式选取:
      • 如果所需的权重大于 500,则按升序检查高于所需权重的权重,然后按降序检查低于所需权重的权重,直到找到匹配项。
      • 若目标粗细大于 500,首先在高于目标值的方向按升序检查,随后在低于目标值的方向按降序检查,直到找到匹配。
      • 若目标粗细恰为 400,先检查 500,然后采用“小于 400”时的规则。
    4. font-size 必须在 UA 依赖的容差范围内匹配。(通常,可缩放字体的尺寸四舍五入到最接近的整数像素,而位图字体的容差可能大至 20%。)后续计算(例如其他属性中通过 ‘em’ 值进行的计算)基于所使用的 font-size 值,而非指定的那个值。
  5. 如果匹配的人脸是通过 @font-face 规则定义的,用户代理必须使用以下过程来选择单个字体。

    1. 如果字体资源尚未加载,且 ‘unicode-range’ 描述符值定义的字符范围包含所讨论的字符,则加载该字体。
    2. 下载后,如果 有效字符映射表 支持所讨论的字符,则选择该字体。

    当匹配的人脸是 复合人脸 时,用户代理必须对 复合人脸 中的每个人脸按照 @font-face 规则定义的逆序使用上述过程。

    在下载过程中,用户代理可以选择等待字体下载完成,或者先使用替代字体度量进行渲染,待字体下载完成后再次渲染。

  6. 如果不存在匹配的人脸,或者匹配的人脸不包含要渲染字符的字形,则选择下一个族名称并重复上述三个步骤。来自族中其他人脸的字形不予考虑。唯一的例外是,如果该人脸支持给定字形,且 ‘font-synthesis’ 属性的值允许合成这些人脸,用户代理可以选择性地替代使用 默认人脸 的合成倾斜版本。例如,如果斜体人脸不支持阿拉伯语字形,可以使用常规人脸的合成斜体版本。

  7. 如果没有更多的字体族可供评估且未找到匹配的人脸,则用户代理执行 系统字体回退 过程以找到要渲染字符的最佳匹配项。该过程的结果可能因用户代理而异。
  8. 如果某个特定字符无法使用任何字体显示,用户代理应通过某种方式指示字符未显示,要么显示缺失字形的符号表示(例如使用 Last Resort 字体),要么使用默认字体中的缺失字符字形。

只要实现表现得如同完全遵循了该算法,则允许对该过程进行优化。匹配以定义明确的顺序发生,以确保在拥有相同可用字体集和渲染技术的情况下,用户代理之间的结果尽可能一致。

第一个可用字体(用于例如 字体相关长度(如 ‘ex’ 和 ‘ch’)的定义,或 line-height 属性的定义中)被定义为第一个在 ‘font-family’ 列表中给定字体族(如果都没有,则为用户代理的默认字体)情况下能够匹配 U+0020(空格)字符的可用字体。

5.3. 簇匹配

当文本包含组合标记等字符时,理想情况下基字符应使用与标记相同的字体渲染,这确保了标记的正确放置。因此,簇(clusters)的字体匹配算法比单独匹配单个字符的常规情况更为专业。对于包含变体选择符的序列,其指示了用于给定字符的精确字形,用户代理在尝试使用基字符的默认字形之前,总是尝试 系统字体回退 以查找适当的字形。

包含组合标记或其他修饰符的码位序列称为字素簇(grapheme cluster)(更完整的描述请参阅 [CSS-TEXT-3][UAX29])。对于包含基字符 b 和一系列组合字符 c1, c2… 的给定簇,整个簇使用以下步骤进行匹配:

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

5.4. 字符处理问题

CSS 字体匹配总是在包含 Unicode 字符 [UNICODE] 的文本运行上执行,因此假设使用遗留编码的文档在匹配字体之前已转码。对于同时包含遗留编码和 Unicode 的 字符映射表 的字体,遗留编码 字符映射表 的内容不得对字体匹配过程的结果产生任何影响。

字体匹配过程不假设文本运行处于正规化或非正规化形式(有关详细信息,请参阅 [CHARMOD-NORM])。字体可能仅支持预组合形式,而不支持基字符加组合标记的分解序列。作者应始终根据其内容调整字体选择,包括内容是否包含正规化或非正规化的字符流。

如果给定字符是专用区(Private-Use Area)Unicode 码位,用户代理必须仅匹配 ‘font-family’ 列表中命名的非通用字体族。如果 ‘font-family’ 列表中命名的族都不包含该码位的字形,用户代理必须为该字符显示某种形式的缺失字形符号,而不是尝试为该码位进行 系统字体回退。匹配替换字符 U+FFFD 时,用户代理可以跳过字体匹配过程并立即显示某种形式的缺失字形符号,无需显示本应通过字体匹配过程选出的字体中的字形。

通常,给定族中的字体将全部具有相同或相似的 字符映射表。此处概述的过程旨在处理即使包含具有差异巨大 字符映射表 的人脸的字体族。但是,请作者注意,使用此类族可能会导致意外结果。

5.5. CSS 2.1 以来字体匹配的变化

上述算法在许多关键点上与 CSS 2.1 不同。做出这些更改是为了更好地反映跨用户代理实现的实际字体匹配行为。

与 CSS 2.1 中字体匹配算法的差异

5.6. 字体匹配示例

值得注意的是,CSS 选择器语法可用于创建语言敏感的排版。例如,一些中日韩字符在 Unicode 中被统一为相同的码位,尽管在两种语言中抽象字形并不相同。

*:lang(ja) { font: 900 14pt/16pt "Heisei Mincho W9", serif; }
*:lang(zh-Hant-TW) { font: 800 14pt/16.5pt "Li Sung", serif; }

这会选择任何具有给定语言(例如台湾所使用的日语或繁体中文)的元素,并使用适当的字体。

6. 字体特性属性

现代字体技术支持各种先进的排版和特定于语言的字体特性。使用这些特性,单一字体可以为广泛的连字、上下文和风格替代字、表格数字和旧式数字、小型大写字母、自动分数、花饰字以及特定于给定语言的替代字提供字形。为了允许作者控制这些字体功能,‘font-variant’ 属性已在 CSS3 中进行了扩展。它现在充当一组属性的简写,提供对风格化字体特性的控制。

6.1. 字形选择与定位

本节为非规范性内容

用于显示拉丁文本的简单字体使用非常基础的处理模型。字体包含一个将每个字符映射到该字符字形的 字符映射表。后续字符的字形只是简单地沿着文本运行一个接一个地放置。OpenType 和 AAT(Apple Advanced Typography)等现代字体格式使用更丰富的处理模型。给定字符的字形不仅可以根据字符本身的码位来选择和定位,还可以根据相邻字符以及为文本启用的语言、脚本和特性来选择和定位。字体特性可能是特定脚本所必需的,或被推荐为默认启用,亦或是旨在由作者控制的风格化特性。在文本处理操作(如文本转换、文本方向和文本对齐)的总体顺序中,字体选择和定位发生的时间点在 [CSS-TEXT-3], § 文本处理操作顺序 中描述。

有关这些特性的良好视觉概述,请参阅 [OPENTYPE-FONT-GUIDE]。有关 OpenType 字体字形处理的详细描述,请参阅 [WINDOWS-GLYPH-PROC]

风格化字体特性可分为两大类:影响字形形状与周围环境协调的特性,如字距调整(kerning)和连字特性;以及影响形状选择的特性,如小型大写字母、下标/上标和替代特性。

下文列出的 font-variant 的子属性用于控制这些风格化字体特性。它们不控制显示某些脚本所需的特性,例如显示阿拉伯语或印度语文本时使用的 OpenType 特性。它们影响字形选择和定位,但不影响字体匹配部分中所述的字体选择(除非是出于与 CSS 2.1 兼容的需要)。

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

6.2. 特定语言显示

OpenType 还支持特定于语言的字形选择和定位,以便在语言决定特定显示行为的情况下能够正确显示文本。许多语言共享相同的脚本,但某些字母的形状在这些语言中可能有所不同。例如,某些西里尔字母在俄语文本中的形状与在保加利亚语文本中的形状不同。在拉丁文本中,通常使用没有 ‘i’ 上面一点的显式 fi-连字来渲染 “fi”。然而,在同时使用带点 i 和无点 i 的土耳其语等语言中,不使用此连字或使用包含 ‘i’ 上面一点的专用版本非常重要。下例显示了基于西班牙语、意大利语和法语正字法中发现的风格传统的特定于语言的变化。

language specific forms, spanish
language specific forms, italian
language specific forms, french

如果元素的上下文语言根据 文档语言 的规则是已知的,则要求用户代理从上下文语言推断 OpenType 语言系统,并在使用 OpenType 字体选择和定位字形时使用该系统。

6.3. 字距调整(Kerning):font-kerning 属性

名称font-kerning
auto | normal | none
初始值auto
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

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

auto
指定由用户代理自行决定是否应用字距调整
normal
指定应用字距调整
none(无)
指定不应用字距调整

对于不包含字距调整数据的字体,此属性将没有可见效果。使用 OpenType 字体渲染时,[OPENTYPE] 规范建议默认启用字距调整。启用字距调整时,OpenType kern 特性被启用(对于垂直文本运行,则启用 vkrn 特性)。用户代理还必须支持仅通过包含在 kern 字体表中的数据来支持字距调整的字体,正如 OpenType 规范中所述。如果定义了 ‘letter-spacing’ 属性,字距调整会被视为默认间距的一部分,且字母间距调整是在字距调整应用之后进行的。

当设置为 ‘auto’ 时,用户代理可以根据多种因素确定是否应用字距调整:文本大小、脚本或其他影响文本处理速度的因素。希望实现适当字距调整的作者应使用 normal 显式启用字距调整。同样,一些作者可能更喜欢在性能比精确外观更重要的情况下禁用字距调整。然而,在设计良好的现代实现中,字距调整的使用通常不会对文本渲染速度产生重大影响。

6.4. 连字:font-variant-ligatures 属性

名称font-variant-ligatures
normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

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

<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 字体,默认启用常见连字。
common ligature example
no-common-ligatures
禁用常见连字的显示(OpenType 特性:liga, clig)。
discretionary-ligatures
启用自由连字的显示(OpenType 特性:dlig)。哪些连字是自由或可选的由字体设计者决定,因此作者需要参考给定字体的文档以了解哪些连字被视为自由连字。
discretionary ligature example
no-discretionary-ligatures
禁用自由连字的显示(OpenType 特性:dlig)。
historical-ligatures
启用历史连字的显示(OpenType 特性:hlig)。
historical ligature example
no-historical-ligatures
禁用历史连字的显示(OpenType 特性:hlig)。
contextual
启用上下文替代字(contextual alternates)的显示(OpenType 特性:calt)。虽然严格来说不是连字特性,但像连字一样,此特性通常用于使字形形状与周围环境相协调。对于 OpenType 字体,默认启用此特性。
contextual alternate example
no-contextual
禁用上下文替代字的显示(OpenType 特性:calt)。

复杂脚本正确渲染所必需的强制连字不受上述设置(包括 ‘none’)的影响(OpenType 特性:rlig)。

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

名称font-variant-position
normal | sub | super
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

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

comparison between real subscript glyphs and synthesized ones

下标字形(顶部)与典型的合成下标(底部)

各个值具有以下含义

normal
未启用下述任何特性。
sub (下标)
启用下标变体的显示(OpenType 特性:subs)。
super (上标)
启用上标变体的显示(OpenType 特性:sups)。

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

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

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

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

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

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

此属性不是累积的。将其应用于下标或上标内的元素不会嵌套下标或上标字形的放置。在此属性值为 ‘sub’ 或 ‘super’ 的文本运行中包含的图像将按照其值为 normal 时的方式进行绘制。

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

变体字形使用与默认字形相同的基线。基线位置没有移动,因此使用变体字形不会影响行内框(inline box)的高度,也不会改变行框(linebox)的高度。这使得上标和下标变体成为在保持行距(leading)恒定至关重要的场合(例如多栏布局)的理想选择。

针对 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
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

此属性允许选择用于小型或微型大写字母或标题(titling)的替代字形。这些字形经过专门设计,能与周围的正常字形融合良好,以保持因简单缩放字体以适应此目的而受损的字重和可读性。

各个值具有以下含义

normal
未启用下述任何特性。
small-caps
启用小型大写字母的显示(OpenType 特性:smcp)。小型大写字形通常使用大写字母的形状,但尺寸减小为小写字母的大小。
small-caps example
all-small-caps
启用大写和小写字母的小型大写字母显示(OpenType 特性:c2sc, smcp)。
petite-caps
启用微型大写字母的显示(OpenType 特性:pcap)。
all-petite-caps
启用大写和小写字母的微型大写字母显示(OpenType 特性:c2pc, pcap)。
unicase
启用大写字母的小型大写字母与正常小写字母混合的显示(OpenType 特性:unic)。
titling-caps
启用标题大写字母的显示(OpenType 特性:titl)。大写字母字形通常设计为与小写字母一起使用。在全大写标题序列中使用时,它们可能会显得过于强烈。标题大写字母是专门为此情况设计的。

这些字形的可用性取决于字体特性列表中是否定义了给定特性。用户代理可以选择性地以每个脚本为基础决定这一点,但明确不应以每个字符为基础决定这一点。

某些字体可能仅支持此属性所描述的部分或全部特性。为了与 CSS 2.1 向后兼容,如果指定了 ‘small-caps’ 或 ‘all-small-caps’,但给定字体没有小型大写字形可用,用户代理应模拟小型大写字体,例如通过选取正常字体并将小写字母的字形替换为大写字母的缩放版本(对于 ‘all-small-caps’ 的情况,则替换大写和小写字母的字形)。

synthetic vs. real 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 应以无任何小型大写字母(原生或合成)的方式渲染。

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

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
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

指定对数字形式的控制。下例显示了如何组合其中一些值,以影响在支持这些特性的字体中表格数据的渲染。在普通段落文本中,使用比例数字,而在表格中则使用等宽数字,以便数字列能够正确对齐。

combining number styles

使用数字样式

可能的组合

<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
启用衬线对角分数(lining diagonal fractions)的显示(OpenType 特性:frac)。
diagonal fraction example
stacked-fractions
启用衬线堆叠分数(lining stacked fractions)的显示(OpenType 特性:afrc)。
stacked fraction example
ordinal
启用序数(ordinal numbers)所用字母形式的显示(OpenType 特性:ordn)。
ordinals example
slashed-zero
启用带斜杠零(slashed zeros)的显示(OpenType 特性:zero)。
slashed zero example

对于 ‘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-east-asian 属性

名称font-variant-east-asian
normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

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

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

各个值具有以下含义

normal
未启用下述任何特性。
jis78
启用 JIS78 形式的渲染(OpenType 特性:jp78)。
JIS78 form example
jis83
启用 JIS83 形式的渲染(OpenType 特性:jp83)。
jis90
启用 JIS90 形式的渲染(OpenType 特性:jp90)。
jis04
启用 JIS2004 形式的渲染(OpenType 特性:jp04)。

各种 JIS 变体反映了不同日本国家标准中定义的字形形式。字体通常包含由最新国家标准定义的字形,但有时有必要使用较旧的变体,例如用于标牌。

simplified
启用简化形式的渲染(OpenType 特性:smpl)。
traditional
启用传统形式的渲染(OpenType 特性:trad)。

simplified’ 和 ‘traditional’ 值允许控制那些随着时间推移被简化,但在某些上下文中仍使用较旧的传统形式的字符的字形形式。确切的字符集和字形形式将在一定程度上根据给定字体设计的上下文而有所不同。

tradtional form example
full-width
启用全角变体(full-width variants)的渲染(OpenType 特性:fwid)。
proportional-width
启用比例间距变体(proportionally-spaced variants)的渲染(OpenType 特性:pwid)。
proportionally spaced Japanese example
ruby
启用 ruby 变体字形的显示(OpenType 特性:ruby)。由于 ruby 文本通常比相关的正文文本小,字体设计者可以设计专门用于 ruby 的字形,它们比默认字形的缩减版本更具可读性。仅影响字形选择,没有相关的字体缩放或其他影响行布局的变化。下方的红色 ruby 文本显示为默认字形(顶部)和 ruby 变体字形(底部)。注意笔画粗细的细微差别。
ruby variant example

6.9. 字体渲染的整体简写: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 ] || <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 属性是所有 font-variant 子属性的简写。值 normalfont-variant 的所有子属性重置为其初始值。none 值将 ‘font-variant-ligatures’ 设置为 ‘none’ 并将所有其他字体特性属性重置为其初始值。像其他简写一样,使用 font-variant 会将未指定的 font-variant 子属性重置为其初始值。它不会重置 font-feature-settings’ 的值.

6.10. 底层字体特性设置控制:font-feature-settings 属性

名称font-feature-settings
normal | <feature-tag-value> #
初始值normal
应用于所有元素
可继承
百分比不适用
媒体视觉
计算值按指定值
可动画

此属性提供对 OpenType 字体特性的底层控制。它旨在作为一种提供访问不常用但特定用例所需的字体特性的方式。

作者通常应尽可能使用 font-variant 及其相关子属性,仅在特殊情况下(其使用是访问特定且不常用的字体特性的唯一途径时)才使用此属性。

/* enable small caps and use second swash alternate */
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 的计算值是一个映射(map),因此指定的任何重复值都不得保留。如果同一个轴名称出现多次,与最后一次出现相关联的值将取代该轴的任何先前值。

font-feature-settings: "dlig" 1;       /* dlig=1 enable discretionary ligatures */
font-feature-settings: "smcp" on;      /* smcp=1 enable small caps */
font-feature-settings: 'c2sc';         /* c2sc=1 enable caps to small caps */
font-feature-settings: "liga" off;     /* liga=0 no common ligatures */
font-feature-settings: "tnum", 'hist'; /* tnum=1, hist=1 enable tabular numbers and historical forms */
font-feature-settings: "tnum" "hist";  /* 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: dlig;           /* invalid, tag must be a string */

当指定了超出字体支持范围的值时,其行为是明确未定义的。对于布尔特性,通常它们将启用该特性。对于非布尔特性,超出范围的值通常等同于 0 值。然而,在这两种情况下,确切的行为将取决于字体的设计方式(具体取决于用于定义该特性的查找类型)。

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

下方的日文文本将以半角假名字符进行渲染

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

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

7. 字体特性解析

如上一节所述,可以通过多种方式启用字体特性,无论是通过在样式规则或 @font-face 规则中使用 font-variantfont-feature-settings。这些设置并集的解析顺序定义如下。通过 CSS 属性定义的特性叠加在布局引擎的默认特性之上。

7.1. 默认特性

对于 OpenType 字体,用户代理必须启用 OpenType 文档中针对给定脚本和书写模式定义的默认特性。必须默认启用强制连字、常见连字和上下文形式(OpenType 特性:rlig, liga, clig, calt),以及本地化形式(OpenType 特性:locl),以及正确显示组合字符和标记所需的特性(OpenType 特性:ccmp, mark, mkmk)。这些特性必须始终启用,即使 font-variantfont-feature-settings 属性的值为 normal。只有当作者显式覆盖时才会禁用单个特性,例如当 ‘font-variant-ligatures’ 被设置为 ‘no-common-ligatures’ 时。对于处理诸如 阿拉伯语 [ARABIC-TYPO]高棉语天城体 等复杂脚本,需要额外的特性。对于垂直文本运行内的直立文本,必须启用垂直替代字(OpenType 特性:vert)。

7.2. 特性优先级

常规和 字体特定 的字体特性属性设置按以下优先级升序解析。此顺序用于构建影响给定文本运行的组合字体特性列表。

  1. 默认启用的字体特性,包括给定脚本所需的特性。
  2. 如果字体通过 @font-face 规则定义,则为 @font-face 规则中 font-feature-settings 描述符所隐含的字体特性。
  3. font-variant 属性值、相关 font-variant 子属性以及任何使用 OpenType 特性的其他 CSS 属性(例如 ‘font-kerning’ 属性)所隐含的字体特性。
  4. font-variantfont-feature-settings 以外的属性确定的特性设置。例如,为 ‘letter-spacing’ 属性设置非默认值会禁用常见连字。
  5. 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;
}

8. 对象模型

@font-face 规则的内容可以通过以下对 CSS 对象模型的扩展进行访问。

8.1. CSSFontFaceRule 接口

CSSFontFaceRule 接口表示 @font-face 规则。

interface CSSFontFaceRule : CSSRule {
    readonly attribute CSSStyleDeclaration style;
};

附录 A:将平台字体属性映射到 CSS 属性

本附录作为其他部分所述某些问题和情况的背景资料。它仅供参考。

CSS 中的字体属性旨在独立于所使用的底层字体格式;除了常见的 TrueType 和 OpenType 字体外,它们还可用于指定位图字体、Type1 字体、SVG 字体。但 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 为了向后兼容,决定将此族名称限制为最多四个 face;对于更大的分组,可以使用 “preferred family”(名称 ID 16)或 “WWS family”(名称 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 字体功能。

变更

相对于 2018 年 8 月 14 日 CSS Fonts 3 提案建议的更改

相对于 2018 年 3 月 15 日 CSS Fonts 3 候选建议的更改

相对于 2013 年 10 月 CSS3 Fonts 候选建议的更改

致谢

我们要感谢 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]

本规范中的示例均以“例如”一词引入,或者通过 class="example" 与规范性文本隔开,如下所示

这是一个说明性示例。

说明性注释以“Note”一词开头,并使用 class="note" 与规范性文本隔开,如下所示

注意,这是一个说明性注释。

一致性类别

CSS Fonts Level 3 模块的一致性定义了三种一致性类别

样式表
一份 CSS 样式表
渲染器
一种 用户代理 (UA),它解释样式表的语义并渲染使用它们的文档。
创作工具
一种 用户代理 (UA),用于编写样式表。

如果样式表的所有声明(使用本模块定义的属性)根据通用 CSS 语法和本模块中给出的每个属性的独立语法均为有效值,则该样式表符合 CSS Fonts Level 3 模块。

如果渲染器除了按相关规范解释样式表外,还通过正确解析 CSS Fonts Level 3 模块定义的全部功能并相应地渲染文档来支持这些功能,则该渲染器符合 CSS Fonts Level 3 模块。但是,用户代理因设备限制而无法正确渲染文档并不使其不符合标准。(例如,用户代理无需在单色显示器上渲染颜色。)

如果创作工具编写的样式表根据通用 CSS 语法和本模块中每个功能的独立语法在语法上是正确的,并且满足本模块中描述的所有其他样式表一致性要求,则该创作工具符合 CSS Fonts Level 3 模块。

部分实现

为了使作者能够利用前向兼容的解析规则来指定后备值,CSS 渲染器 **必须** 将其无法使用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效(并 适当忽略)。特别地,用户代理 **不得** 在单一多值属性声明中选择性地忽略不支持的组件值而保留支持的值:如果任何值被视为无效(因为不支持的值必须如此),CSS 要求忽略整个声明。

实验性实现

为避免与未来 CSS 特性冲突,CSS 2.1 规范在 前缀语法 中保留了专用于专有和实验性扩展的语法。

在规范达到候选推荐(Candidate Recommendation)阶段之前,所有 CSS 特性的实现均视为实验性。CSS 工作组建议实现者对这些特性使用带供应商前缀的语法,包括在 W3C 工作草案中的特性。这样可以避免未来草案更改导致的不兼容。

非实验性实现

一旦规范达到候选推荐阶段,非实验性实现即可成为可能,实现者应发布他们能够证明根据规范正确实现的任何 CR 级别特性的无前缀实现。

为建立并保持 CSS 在不同实现间的互操作性,CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前,向 W3C 提交一份实现报告(并在必要时提交用于该实现报告的测试用例)。提交给 W3C 的测试用例需经 CSS 工作组审阅和修正。

有关提交测试用例和实现报告的更多信息,请访问 CSS 工作组网站 https://w3org.cn/Style/CSS/Test/。问题应发送至邮件列表 public-css-testsuite@w3.org

引用

规范性引用

[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3 2016 年 9 月 29 日。CR。URL: https://w3org.cn/TR/css-values/
[FETCH]
Fetch. WhatWG Living Standard. URL: https://fetch.spec.whatwg.org/
[OPENTYPE]
OpenType specification. Microsoft. URL: http://www.microsoft.com/typography/otspec/default.htm
[OPENTYPE-FEATURES]
OpenType feature registry. Microsoft. URL: http://www.microsoft.com/typography/otspec/featurelist.htm
[RFC2119]
S. Bradner。RFC 中用于指示需求等级的关键词。RFC 2119。URL:http://www.ietf.org/rfc/rfc2119.txt
[RFC8081]
C. Lilley. The "font" Top-Level Media Type. 2017 年 2 月。Proposed Standard. URL: https://tools.ietf.org/html/rfc8081
[UAX15]
Mark Davis; Ken Whistler. Unicode Normalization Forms. 2012 年 8 月 31 日。Unicode Standard Annex #15. URL: http://www.unicode.org/reports/tr15/
[UNICODE]
The Unicode Standard URL: http://www.unicode.org/versions/latest

其它参考文献

[AAT-FEATURES]
Apple Advanced Typography font feature registry. Apple. URL: https://developer.apple.com/fonts/TrueType-Reference-Manual/RM09/AppendixF.html
[ARABIC-TYPO]
Huda Smitshuijzen AbiFares. Arabic Typography: A Comprehensive Sourcebook. Saqi Books. 2001. ISBN 0-86356-347-3.
[CHARMOD]
Martin J. Dürst; et al. Character Model for the World Wide Web 1.0: Fundamentals. 2005 年 2 月 15 日。W3C Recommendation. URL: https://w3org.cn/TR/2005/REC-charmod-20050215/
[CHARMOD-NORM]
Addison Phillips. Character Model for the World Wide Web: String Matching. 2018 年 4 月 20 日。W3C Working Draft. (Work in progress.) URL: https://w3org.cn/TR/2018/WD-charmod-norm-20180420/
[CSS-TEXT-3]
Elika J. Etemad / fantasai; Koji Ishii. CSS Text Module Level 3. 2017 年 8 月 22 日。W3C Working Draft. (Work in progress.) URL: https://w3org.cn/TR/2017/WD-css-text-3-20170822/
[CSS3-CONDITIONAL]
L. David Baron. CSS Conditional Rules Module Level 3. 2013 年 4 月 4 日。W3C Candidate Recommendation. (Work in progress.) URL: https://w3org.cn/TR/2013/CR-css3-conditional-20130404/
[OPEN-FONT-FORMAT]
Information technology — Coding of audio-visual objects — Part 22: Open Font Format. International Organization for Standardization. ISO/IEC 14496-22:2009. URL: http://standards.iso.org/ittf/PubliclyAvailableStandards/c052136_ISO_IEC_14496-22_2009%28E%29.zip
[OPENTYPE-FONT-GUIDE]
OpenType User Guide. FontShop International. URL: http://www.fontblog.de/wp-content/uploads/2015/11/FF_OTF_user_guide.pdf
[TRUETYPE]
TrueType™ Reference Manual. Apple. URL: https://developer.apple.com/fonts/TrueType-Reference-Manual/
[UAX29]
Mark Davis. Unicode Text Segmentation. 2012 年 9 月 12 日。Unicode Standard Annex #29. URL: http://www.unicode.org/reports/tr29/
[WINDOWS-GLYPH-PROC]
John Hudson. Windows Glyph Processing. Microsoft Typogrraphy. URL: http://www.microsoft.com/typography/developers/opentype/default.htm

索引

  • font-feature-settings
  • font-kerning,6.3.
  • font-size,3.5.
  • font-size-adjust,3.6.
  • font-stretch
  • font-style
  • 描述符,4.4.
  • 属性,3.4.
  • font-synthesis,3.8.
  • font-variant
  • font-variant-caps,6.6.
  • <font-variant-css21>3.7.
  • font-variant-east-asian,6.8.
  • font-variant-ligatures,6.4.
  • font-variant-numeric,6.7.
  • font-variant-position,6.5.
  • font-weight
  • 描述符,4.4.
  • 属性,3.2.
  • full-width,6.8.
  • <generic-family>3.1.
  • historical-ligatures,6.4.
  • <historical-lig-values>6.4.
  • italic,3.4.
  • jis04,6.8.
  • jis78,6.8.
  • jis83,6.8.
  • jis90,6.8.
  • lighter,3.2.
  • lining-nums,6.7.
  • monospace(等宽字体),定义,??
  • no-common-ligatures,6.4.
  • no-contextual,6.4.
  • no-discretionary-ligatures,6.4.
  • no-historical-ligatures,6.4.
  • none(无)
    • font-kerning,6.3.
    • font-size-adjust,3.6.
    • font-variant,6.9.
    • font-variant-ligatures,6.4.
  • normal
    • font-feature-settings,6.10.
    • font-kerning,6.3.
    • font-stretch,3.3.
    • font-style,3.4.
    • font-variant,6.9.
    • font-variant-caps,6.6.
    • font-variant-east-asian,6.8.
    • font-variant-ligatures,6.4.
    • font-variant-numeric,6.7.
    • font-variant-position,6.5.
    • font-weight,3.2.
  • <number>3.6.
  • <numeric-figure-values>6.7.
  • <numeric-fraction-values>6.7.
  • <numeric-spacing-values>6.7.
  • oblique,3.4.
  • oldstyle-nums,6.7.
  • ordinal,6.7.
  • petite-caps,6.6.
  • proportional-nums,6.7.
  • proportional-width,6.8.
  • <relative-size>3.5.
  • 渲染器 (renderer),??
  • ruby,6.8.
  • sans-serif(无衬线字体),定义,??
  • semi-condensed,3.3.
  • semi-expanded,3.3.
  • serif(衬线字体),定义,??
  • simplified,6.8.
  • slashed-zero,6.7.
  • small-caps,6.6.
  • src,4.3.
  • stacked-fractions,6.7.
  • 样式表
    • 作为一致性类别,??
  • sub,6.5.
  • super,6.5.
  • 支持 (support),5.2.
  • 系统字体回退 (system font fallback),5.2.
  • tabular-nums,6.7.
  • titling-caps,6.6.
  • traditional,6.8.
  • ultra-condensed,3.3.
  • ultra-expanded,3.3.
  • unicase,6.6.
  • unicode-range,4.5.
  • <urange>4.5.
  • 字重 (weight),2.
  • 字宽 (width),2.
  • 属性索引

    属性初始值应用于继承百分比媒体
    字体 (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 | noneauto所有元素不适用视觉
    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-expandednormal所有元素不适用视觉
    font-style normal | italic | obliquenormal所有元素不适用视觉
    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-capsnormal所有元素不适用视觉
    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 | supernormal所有元素不适用视觉
    font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900normal所有元素不适用视觉
    描述符初始值
    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-expandednormal
    font-style normal | italic | obliquenormal
    font-weight normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900normal
    src [ <url> [format(<string> #)]? | <font-face-name> ] #不适用
    unicode-range <urange> #U+0-10FFFF