前面花了三篇的篇幅（Web Fonts vs. 系统字体、FOUT、FOIT 和 FOFT 和 Web Fonts 字体加载策略）围绕着 Web Fonts 的优化做了些探讨。但这些优化手段都还是会引起 Web 布局偏移。不过，CSS 的一些新特性，即 F-mods（字体度量覆盖描述符）来覆盖字体的一些度量参数，让系统字体字体（备用字体）和 Web Fonts 更接近，尽可能的减少布局偏移。

使用 F-mods 减少布局偏移

在了解如何使用 F-mods 减少布局偏移之前，我们有必要先花一点时间来简单的了解字体度量（Font Metrics）和 F-mods！

字体度量（Font Metrics）

正如 @Weston Thayer 在其博客《Intro to Font Metrics》开头提到：

字体文件包含大量关于字体的信息。

简单地说，字体是由一系列符号(通常称为字母或字符)组成的字体的数字表示形式。计算机读取字体文件，以便将屏幕上的字形渲染为像素。为了描述应该如何将所有这些单独的符号组合到单词、句子和段落中，字体设计人员用指标对字体进行编码。字体参数可以帮助计算机确定行与行之间的默认间距，上标（sup）和下标（sub）的高低，以及如何将两个不同大小的文本对齐。​

通常情况，这些参数不会向用户公开，但我们可以使用一些工具来获取这些参数，比如 FontForge 和 Font Inspector： ​

注意，上图中的 ascender、descender 和 lineGap 接下来就会聊到。

另外，字体在 Web 上的使用是个复杂的体系，除了涉及一些排版本知识之外，还涉及一些字体知识，这里就对字体度量及相关的 CSS 属性不做过多解读，如果你想深究这一领域，下面这些资源应该值得阅读：

• Intro to Font Metrics
• FontForge Documentation
• Font Metrics Guide
• Technical Guidance Regarding Font Development And Production
• Vertical Metrics
• TrueType Reference Manual
• Fonts and text metrics
• Deep dive CSS: font metrics, line-height and vertical-align
• CSS Houdini: Font Metrics API Level 1

F-mods 简介

F-mods 是 Font Metrics Override Descriptors（字体度量覆盖描述符）的简称。它对应着 CSS Fonts Module Level 4 规范中的 @font-face 部分的第十一小节，即 默认的字体度量覆盖。简单地说，就是新增的四个 CSS 属性，对应着字体度量的四个描述符：

• ascent-override：对应字体度量中的 ascender 参数，用来覆盖分配给字体上升部分的尺寸，即上升指示（Ascent Metric）；该描述符定义了字体基线（Baseline）以上的高度
• descent-override：对应字体度量中的 descender 参数，用来覆盖分配给字体下降部分的尺寸，即下降指标（Descent Metric）；该描述符定义了字体基线（Baseline）以下的高度
• line-gap-override：对应字体度量中的 lineGag 参数，用来覆盖行间距，即行距指标（Line Gap Metric）；该描述是字体推荐的行距或外部引线（External Leading）
• advance-override：为每个字符设置一个额外的提前量，以帮助匹配行宽并防止单词溢出

特别声明：其中 advance-override 还未进入 W3C 规范，目前还仅处于提案中；而 ascent-override、descent-override 和 line-gap-override 属性目前已在 Chromium 87+ 和 Firefox 89+ 中实现！

F-mods 作用

这四个描述符的组合可以让我们告诉浏览器在下载 Web Fonts 之前字符占用多少空间，来覆盖回退字体（系统字体）的布局，使其与 Web Fonts 相匹配。简单地说：

这四个描述符可以让你的系统字体更接近 Web Fonts!

其中 ascent-override、descent-override 和 line-gap-override 描述符使我们 能够完全消除垂直布局的偏移，因为这三个描述符都会影响行高。

当计算行高时，字体的上升（Ascent）、下降（Descent）和行距（Line Gap）三指标会被设置为所用字体大小（font-size）的给定百分比，即解析为给定百分比（也就是ascent-override、descent-override和 line-gap-override的值，它们取值是个百分比值，除默认值 normal之外）乘以字体大小（font-size）。这也让我们可以使用它们来覆盖行框高度（Line Box Height）和基线位置（Baseline Position）：

行框高度（Line Box Height） = 上升（Ascent） + 下降（Descent） + 行距（Line Gap）
基线位置（Baseline Position） = 行框顶部（Line Box Top） + 行距（Line Gap） / 2 + 上升（Ascent）

注意，上面这几个专业术语，可以通过下图找到他们在一个字体中对应的位置：

假设，我们分别给 ascent-override 设置值为 80%，descent-override 设置值为 20%，line-gap-override 设置值为 0%，把这些参数套用到上面公式的计算公式中，就可以得出每个行框的高度为 1em（假设使用的font-size为 1em），而基线位于行框顶部以下 0.8em 的位置。

注意，开发者可以在元素上设置 line-height 为非 normal 的值。然而，line-height: normal 是一个重要的用例，我们希望在这种情况之下也能消除布局偏移。

而 advance-override 描述符允许我们减少水平布局的偏移，以及由不同的换行引起的垂直布局的偏移。这个描述为使用该字体的每个字符设置了一个额外的提前量。额外的提前量等于描述符的值乘以使用的字体大小。该描述符是在 CSS 的 letter-spacing 属性之外应用的。比如，如果我们在一个元素上设置了 font-size: 20px; letter-spacing: -1px，并且设置了 adavance-override: 0.1，那么最终会得到 20px * 0.1 - 1px = 1px 的字符间的额外间距。

如何获取 F-Mods 所需参数

字体对于很多 Web 开发者而言就是个迷，大多数情况只知道字体的名称，比如AlibabaSans1