本文是阅读CSS标准文档的笔记，也是对CSS字体相关知识的回顾。
级联样式表，级别 1
CSS1定义的字体属性包括：font-family、font-style、font-variant、font-weight、font-size和font。 它的算法要求UA（UserAgent，用户代理）为给定元素中的字符一一查找匹配的CSS属性，并首先尝试匹配font-style，例如斜体和斜体。 然后匹配font-variant，正常匹配非小型大写（大写小写）字体，小型大写匹配（1）标记为小型大写的字体（2）合成大写小写字母的字体（3）替换大写字母A字体对于小写字母（可以通过缩小普通字体的小写字母来实现大的小写字母）。 然后匹配font-weight和font-size，两个属性必须匹配成功。
font-family 是按照优先级排列的字体或常用字体名称列表，每个名称之间用冒号分隔，表示多一种选择。
有两个值：fontname 和 generic fontname。 在前面的示例中，gill 和 helvetica 是显式指定的字体名称，而 sans-serif 是通用字体名称。 CSS1定义了5种通用字体：
一般来说，不应仅指定特定的字体名称，而应在末尾指定通用字体名称。 此外，如果字体名称包含空格，则必须用冒号括起来。
font-style 有 3 个值：正常、斜体和倾斜。 Noraml是普通字体，而斜体是粗体，斜体可以通过倾斜普通字体得到。 对于斜体，如果没有斜体字体，则使用斜体。
一般情况下，如果字体名称中包含Oblique、Slanted或Incline，UA一般将其归类为oblique； 如果字体名称包含 Italic、Cursive 或 Kursiv，UA 将其分类为斜体。
font-variant 主要用于指定普通大写字母和小型大写字母。 真正的小型大写字母字体的字母比小写字母小，但比例略有不同。 而且，如果不是真正的小写字体，也可以将普通字体中的小写字母缩小并替换。 如果不行的话，也可以直接使用小写字母。
CSS1 仅支持小型大写字母的一种变体，不支持其他变体，例如旧式数字、小写数字、压缩或松散字母等。
font-weight选择单词的粗细，有关键字值normal、bold、bolder、lighter和值100~900，表示笔画越来越粗。 Normal对应400，bold对应700。bolder和lighter是相对于从父元素继承的粗细而言的粗体或细体。 实际的字体（字体数据）会有一个或多个属性值，用来描述字体的“粗细”。 但不同字体使用的属性值并不统一。 例如，包含以下关键字的值都可以被视为 Arial：Regular、Roman、Book、Medium、Semi-、DemiBold、Bold 或 Black，具体取决于普通字体的粗细。 。 正因为如此，CSS1定义了一系列的值。 OpenType使用9个数值来区分词权重，可以直接对应。 但并不是所有字体都有这么多粗细，所以 CSS1 还定义了如何向前或向后“求值”，例如如果没有 500，就使用 400。
font-size定义绝对值、相对值、长度值和比例值。 绝对值包括xx-small、x-small、small、medium、large、x-large、xx-large等关键字，它们以1.5倍的比例在UA中存储绝对尺寸。 相对值有较大和较小的关键字，具体取决于父元素文本大小的绝对值。 不允许使用负值。
最后，font是上述所有属性的缩写属性，可以同时设置font-style、font-variant、font-weight、font-size、line-height、font-family。 该属性借鉴了传统排版中同时设置多个属性的缩写。
CascadingStyleSheetsLevel2Revision1(CSS2.1)
CSS1 规定了字体属性的模式。 CSS2.1只是CSS1的补充和扩展。
首先，CSS1只规定font-family最终应该使用一种通用字体作为备份，并没有详细描述这种字体的特性和示例。 CSS2.1详细分析了衬线体、无衬线体、草书、幻想和等宽字体。
其次，所有属性的继承关键字均已降低。 此外，font-variant 始终只支持小型大写字母的一种变体。
最后，CSS2.1 的一个重要补充是减少了字体缩写属性的六个系统字体关键字：标题、图标、菜单、消息框、小标题和状态栏。 例如，字体：菜单； 允许网页中的元素继承系统菜单中使用的字体和属性。 假设系统菜单使用12像素的Times，字体粗细为600，font:menu相当于：
字体：60012px次；
由于系统字体的样式只能整体继承，无法单独获取，因此系统字体的样式只能通过字体缩写属性来继承。 另外，由于字体缩写属性会将所有未显式赋予对应初始值的值重置，因此前面的声明相当于：
CSSFontsModuleLevel3
我们知道，从CSS3开始，CSS规范被拆分为很多模块并单独升级，新的需求也会作为新的模块被建立和标准化。 CSS2.1之后，CSS中有关字体的内容独立为CSS3Fonts模块。 同时，为了支持可下载的自定义字体，创建了CSS3WebFonts模块。
但最终，CSS3Fonts 和 CSS3WebFonts 合并为 CSSFontsModuleLevel3（以下简称“ML3”）。 后来ML3中与字体加载相关的内容独立成为CSSFontLoadingModuleLevel3。
ML3进一步细化了CSS字体属性的内涵和外延。 例如，对于出现在字体列表中的字体系列字体名称。 ML3 进一步解释：
字体名称仅指定字体的名称，但不能指定该字体中的字体。 例如，Futura 是一种字体，它又包含 FuturaMedium、FuturaMediumItalic、FuturaCondensedMedium 和 FuturaCondensedExtraBold 字体。
ML3还减少了font-stretch属性css字体有哪些，该属性用于从字体中选择正常、压缩或宽松的字形，具有以下关键字值：
另外，对于前面font-style属性的所谓“伪粗体”关键字oblique，还可以通过font-synthesis属性设置是否启用。 由于个别字符，例如Cyrion字符，真实斜体和人造斜体之间存在很大差异。 例如，以下规则严格禁止UA合成阿拉伯粗体：
*:lang(ar){字体合成:无;}
ML3还减少了font-size-adjust属性，该属性用于在使用替代字体时保持要使用的原始字体的长宽比（大写字母和小写字母的相对高度），从而保证可读性。
@字体脸
正如前面提到的，ML3 中最大的变化是 FontResource 部分的减少。 本节定义@font-face规则。 @font-face 规则用于定义一种（某种）新字体，其属性由花括号中包含的规则描述符声明确定。 其中，font-family和src是必需的描述符。 （注意，在普通CSS声明中，font-family和src是属性，但在@font-face规则中，由于它们用于定义新字体，因此font-family和src成为描述符，用于描述新字体的属性字体。）
font-family描述符定义了字体名称，它将覆盖底层字体文件中的名称，但如果该名称与系统字体冲突，则会覆盖系统字体。
src描述符定义了字体的来源css字体有哪些，它的值是按优先级顺序排列的来源列表。 本地导入源使用local()，外部导入源使用url()。 使用 url() 导入外部字体时，可以使用 format() 添加字体格式提示。 ML3 定义的有效字体格式字符串是：
使用local()加载本地字体时，由于UA需要匹配字体文件中包含的全名，而同一个字体在不同平台下全名可能不同，所以需要指定所有可能的名称以供跨平台使用。 - 平台使用。
local() 函数很有用。 例如，前面的反例似乎是在不同平台下为同一种字体创建统一的别名。 另一个例子是下面的例子，用于提取大字体中永远不会被引用的字体：
另外，ML3规定UA只能使用字体文件中的中文全名来匹配字体。 虽然用户操作系统将地区设置为美国、芬兰，并且在字体文件中设置了英文和芬兰语的字体全名，但也必须与中文全名相匹配，这是为了跨地区统一平台。 所以下面的 h2 最终将使用默认的衬线字体：
font-style、font-weight、font-stretch这三个描述符的值与对应属性的值相同，只是不允许使用相对关键字bolder和lighter。
综上所述，@font-face规则的引入为CSS字体的使用提供了极大的便利。 事实上，只有与即将推出的 unicode-range 描述符结合使用，@font-face 规则才能充分发挥其潜力。
unicode 范围
unicode-range描述符用于指定当前定义的字体支持的Unicode代码点（codepoint），它是一个以冒号分隔的Unicode范围值。 这相当于定义了一个字符集，UA可以根据这个字符集来决定是否为某个文本下载新的字体。
Unicode范围值支持单代码点（例如U+416）、代码点范围（例如U+400-4ff）和通配符范围（例如U+4??）。
那么Unicdoe范围或者字符范围（字符集）有什么用呢？ 可以使用多个 @font-face 规则和不同的 Unicode 范围来定义复合字体。 换句话说，您可以在自定义字体中包含不同语言脚本的多种字体的不同字形，也可以定义仅包含特定字体的常见或罕见字符的新字体。 如果同一新字体的多个 @font-face 规则中的 Unicode 范围重叠，则最后定义的规则将首先匹配。
以下规则将基于韩文字体 MSMincho 和中文字体 Gentium 定义一个新字体 JapaneseWithGentium，其中拉丁字母的字形来自 Gentium 字体，其他字形来自 MSMincho。
借助@font-face的级联规则，还可以实现字体的“按需下载”。 例如，在下面的示例中，如果仅需要拉丁字符的字形，则 UA 将仅下载 DroidSans.woff。
ML3规定@font-face指定的字体资源采用延迟加载策略，即不使用则不下载。 样式表中可以定义许多@font-faces，但UA必须仅下载这些样式规则中引用的字体。 一个例外是当自定义字体用作后备字体时，UA 可以提前下载它，例如：
通常，页面会在字体之前完成加载。 这时候使用自定义字体的文字应该如何显示呢？ ML3规定UA可以根据自定义字体不可用的情况渲染字体，或者使用后备字体将文本渲染为透明。 但UA必须在自定义字体下载失败后显示文本。 因此，ML3 还要求样式表作者指定与自定义字体大小相似的后备字体。
关于字体获取，ML3规定必须启用CORS，采用Anonymous模式，referrer设置为样式表的URL，origin设置为包含样式表的文档的URL。
关于字体匹配，ML3 是有史以来最详尽的。 它减少了font-stretch的匹配，并枚举了font-style所有可能的匹配情况。 小型大写字母完全脱离了字体匹配过程，并由字体功能处理。 需要使用 Unicode 变体选择器。 簇序列作为一个单元进行匹配。
字体特征
如前所述，font-variant 属性仍然只有一种小型大写字母变体。 而且实际使用的字体远不止大小写字母的一种变体。 因此，ML3 将 font-variant 属性扩展为控制所有与样式相关的字体特征的速记属性。
换句话说，font-variant具有特定的属性，例如font-variant-ligatures、font-variant-postion、font-variant-caps、font-variant-numeric、font-variant-east-asian等。
可以通过 font-variant 或 font-feature-settings 启用字体功能。 由于英语字体涉及许多古老的传统，具体细节留给感兴趣的读者自己学习。
结尾
CSSFontModuleLevel3 于 2018 年 9 月成为 W3C 推荐，随后推出了 CSSFontsModuleLevel4，其中包含一些与 CSS 字体相关的实验性功能。 另外，独立于CSSFontModuleLevel3的CSSFontLoadingModuleLevel3已经得到主流浏览器较新版本的支持。
发表评论