CSS 字体模块 第5级

1. 引言

CSS Fonts Level 4 规范（[CSS-FONTS-4]）描述了 CSS 提供的用于在文档中选择和使用字体的控制手段，包括对可变字体和彩色字体的支持。此处介绍的内容是对 CSS Fonts Level 4 中定义的属性和规则的补充或修改。

本规范目前是 CSS Fonts Level 4 规范的增量。不要假设未在此处出现的内容已经被移除。

1.1. 值定义

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

除了各自定义中列出的特定属性值外，本规范定义的所有属性也接受CSS 通用关键字作为属性值。为提高可读性，未在每处重复列出。

2. 基本字体属性

2.1. 字体族：font-family 属性

2.1.1. 通用字体族

除了 CSS Fonts Level 4 中的 CSS Fonts 4 § 2.1.3 通用字体族，本规范还定义了以下新的通用字体族。

xxx

xxx 通用字体族的占位文本。

2.2. 字体粗细：font-weight 属性

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

2.4. 相对字号：font-size-adjust 属性

对于任意指定的字体大小，文本的视觉尺寸和实际可读性会因字体设计的不同而变化。例如，对于拉丁或西里尔等双字母表文字，上下字母的相对高度（小写字母和大写字母的比例）是影响可读性的关键因素。在字体回退的情况下，回退字体可能与目标字体家族在关键排版度量上的比例不同，因此看起来大小有差异，且可读性可能下降。

font-size-adjust 属性为字体回退时保留文本可读性和视觉尺寸提供了一种方法。它通过调整实际字体大小，使指定的度量在不同字体下保持一致。

取值意义如下：

none

不对font-size做特殊调整。

ex-height | cap-height | ch-width | ic-width | ic-height

指定用于归一化的字体度量，默认为ex-height：

ex-height

以 x-高度除以字体大小，归一化字体的纵横比值。

cap-height

以大写字母高度除以字体大小，归一化 cap-height。

ch-width

以“0”（U+0030）字符的字面宽度除以字体大小，归一化字体的窄字宽。

ic-width

以“水”（U+6C34）字符的字面宽度除以字体大小，归一化字体的宽字宽。

ic-height

以“水”（U+6C34）字符的高度除以字体大小，归一化字体的宽字高。

w3c/csswg-drafts/6384[css-fonts-5] font-size-adjust 缺失度量

<number [0,∞]>

每种字体的实际字号会被归一化，使所选字体度量与计算值 font-size的该比例一致。 换句话说，每个字形的实际字号 u 计算如下：

u  =  ( m / m′ ) s

其中：

s  =  计算后的 'font-size!!property' 值
m  =  由 'font-size-adjust' 属性指定的度量
m′ =  实际字体中的度量
u  =  使用的调整后字体大小

负值无效。

from-font

计算为<number> ，对应于首个可用字体的指定度量。

w3c/csswg-drafts/6384[css-fonts-5] font-size-adjust 缺失度量

下例样式中定义了 Verdana 作为期望字体家族，但如果 Verdana 不可用，则会使用 Futura 或 Times。某个段落还指定了 font-size-adjust。

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

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

Verdana 的纵横比值为 0.545，意味着小写字母相对较高，因此在小字号下也比较易读。Times 的纵横比值较低，仅为 0.447，因此如果发生回退，除非同时指定 font-size-adjust，否则在小字号下文本的可读性会低于 Verdana。

注意：对于带变音符号的文本，过大的 x-高度会降低可读性，因为变音符号被压缩。

下图展示了用这些字体渲染文本的对比，列分别为 Verdana、Futura 和 Times。每行中的单元格使用相同的 font-size，并用红线表示 x-高度的差别。上半部分每行字体大小一致，下半部分除设置相同 font-size 外还设置了 font-size-adjust 为 0.545，使实际字体大小调整以保持 Verdana 的 x-高度。可见下半部分的小号文本在每行间依然较易辨识。

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

注意：由于 font-size-adjust 不影响 line-height，如果行高设置得太紧，可能导致文本行重叠。例如，当用低纵横比值的回退字体归一化为高纵横比值时，字母的上升部和下降部很可能超出行框，若设置 line-height: 1。

font-size-adjust 的调整应用于所选的任何字体，但通常会基于 font-family 列表中第一个（最期望）字体的相关度量值。如果指定准确，则调整公式中的 (m/m′) 项对第一个字体为 1，此字体不做调整，其余字体会调整到一致。如果指定不准确，在不支持 font-size-adjust 的旧用户代理下，使用第一个字体渲染的文本将表现不同。

作者可以通过对比内容相同、font-size-adjust 不同的 span，计算某字体的纵横比值。如果字体大小一致，则当 font-size-adjust 值准确时，两个 span 会对齐。

使用带边框的两个 span 测量字体的 纵横比值。font-size 相同，但 font-size-adjust 只设在右侧 span。可从 0.5 开始调整纵横比值，直到两个字母的边框完全对齐。

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

span {
  border: solid 1px red;
}

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

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

右边的盒子比左边略大，说明该字体的纵横比值小于 0.5。调整该值直到两个盒子对齐。

注意：如果指定的度量在 @font-face 中被覆盖（如通过 size-adjust），则计算 font-size-adjust 时将使用覆盖后的度量。因此，font-size-adjust 与 size-adjust 同时使用时，size-adjust 表现为无效。

3. 字体资源

3.1. @font-face 规则

注：描述符是按字体而不是按元素应用的。 单个元素内可以使用多种字体， 例如用于未被首个可用字体支持的字符。

3.2. 字体引用：src 描述符

3.2.1. 解析 src 描述符

src 描述符的值必须按照 CSS 语法 3 § 5.3.11 解析逗号分隔的组件值列表来解析。 然后每个组件值根据如下语法进行解析：

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

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

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

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

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

如果某个组件值被正确解析， 且是支持的CSS Fonts 4 § 11.2 字体格式或CSS Fonts 4 § 11.1 字体技术， 则将其加入支持的来源列表。 如果解析组件值时出现解析错误 或其 format 或 tech 不被支持， 则不要将其加入支持的来源列表。

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

这些解析规则允许在用户代理不支持某个字体技术或字体格式时实现字体的平滑降级。

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

3.3. 字体属性描述符：font-size

auto

该字体匹配任意字体大小

<number>

如果只给定一个<number>， 该字体只匹配该特定字号。 如果给定两个<number>， 它们指定一个将被匹配的字号范围。

3.4. 字形尺寸调整倍数： size-adjust 描述符

size-adjust 描述符定义了此字体的字形轮廓和度量的乘数， 允许作者在相同 font-size 渲染下协调不同字体的设计。

与该字体相关的所有度量（包括字形进位、基线表和 @font-face 描述符提供的覆盖） 以及渲染的字形图像都会按给定百分比缩放。 因此， 任何基于字体度量派生的值 （如 ex 和 ch 单位， 或 from-font 值的 text-decoration-thickness） 也会受到影响（如果来源于该字体）。 但 计算后的 font-size （以及基于其的值， 如 em 单位、text-underline-offset 百分比等） 不受影响。

注：size-adjust 描述符的作用类似于 font-size-adjust 属性， 本质上通过匹配 ex 高度按字体进行调整， 但同样不会影响 计算后的 font-size。

3.5. 行高字体度量覆盖： ascent-override、descent-override 和 line-gap-override 描述符

ascent-override、descent-override 和 line-gap-override 描述符分别指定字体的上升线度量、下降线度量和行间距度量。 第一个值为 x 轴的取值， 第二个值为 y 轴的取值 （如省略则默认为 normal）。

normal

对应的度量值如同该描述符不存在于@font-face 块中一样， 从字体中正常获取。

注：由于某些字体格式中存在多个该类度量的来源， 这可能导致文本排版在不同 UA/平台上有所差异。

<percentage>

对应的度量值被替换为给定百分比与使用的字体大小相乘的值。

font-size-adjust 属性在 size-adjust 描述符之后应用。

注：先应用 font-size-adjust 再应用 size-adjust 的结果是 size-adjust 看起来没有效果。

注：这些描述符均不会影响 计算 font-size、line-height 或 字体相关长度的计算。 但它们可以影响 line-height: normal 以及更一般的 行内级内容的基线对齐行为。

注：由于这些度量只适用于块轴， y 轴的取值仅在直排排版的垂直排版模式下使用。

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

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

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

@font-face {
  font-family: fallback-to-local;
  src: local(Some Local Font);
  /* 覆盖度量值以匹配 cool-web-font */
  ascent-override: 125%;
  descent-override: 25%;
  line-gap-override: 0%;
  size-adjust: 96%;
}

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

3.6. 上标与下标度量覆盖： superscript-position-override、subscript-position-override、superscript-size-override 和 subscript-size-override 描述符

superscript-position-override、subscript-position-override、superscript-size-override 和 subscript-size-override 描述符 分别指定字体的上标偏移、下标偏移、上标尺寸和下标尺寸度量， 用于 font-variant-position 需要时合成字形。 第一个值为 x 轴的取值， 第二个值为 y 轴的取值 （如省略则默认为第一个值）。

normal

UA 决定使用什么度量值， 可以来源于字体，也可以来源于某种启发式算法。

from-font

使用字体数据中的对应度量（如有）。 （如果度量缺失，则等同于 normal。）

<percentage>

对应的度量将被替换为给定百分比与使用的字体大小相乘的值。

注：由于这些度量仅适用于块轴， y 轴的取值仅在直排排版的垂直排版模式下使用。

4. 字体特性属性

4.1. 字体语言覆写：font-language-override 属性

5. 字体特性与变体解析

6. 字体变体属性

6.1. 光学大小控制：font-optical-sizing 属性

7. 安全性考虑

本规范未报告新的安全性考虑事项。

8. 隐私考虑

本规范未报告新的隐私考虑事项。

9. 致谢

首先，编辑感谢所有本模块上一版的贡献者。

其次，感谢 PDFReactor 的 DerKoun、 Google 的 Xiaocheng Hu， 以及 Mozilla 的 Jonathan Kew， 对 Level 5 版本改进的贡献。

10. 变更记录

10.1. 自 2021年12月21日 WD 以来的变更

• 修正了 font-size 描述符的初始值
• 为 font-size-adjust number 的语法设定了范围
• 将 local() 的语法改为使用 family-name 替代 font-face-name
• 更新为当前的增量字体下载关键字
• 为保持与 CSS Conditional 5 和 11.1 Font tech 一致，将 make feature-* 复数化
• 将区间记号中的 infinity 规范为 ∞
• 修正了 tech() 函数中的拼写错误

10.2. 自 2021-07-29 WD 以来的变更

• 将 technology 重命名为 tech
• 安全性与隐私性章节分离
• 修正 font-technology 语法
• 从 CSS Fonts 4 复制 src 描述符解析部分

10.3. 自 2021-06-29 FPWD 以来的变更

• 移除了警告提示
• 添加了对增量字体技术的支持