【第3385期】你不知道的字体特点

前言

介绍了高质量字体的 OpenType 特性，包括变量轴、替代字形、风格替代字形、swashes、数字、小型大写、上下文替代字形等，并解释了如何在网页中使用这些特性来提升排版效果。今日前端早读课文章由 @飘飘翻译分享。

正文从这开始～～

在 【第3383期】面向开发者的网页排版快速指南 中，我们介绍了改善应用程序中排版的基本步骤。今天，我想进一步探讨字体的话题，以及如何从高质量的字体（付费或免费）中获得更多收益。高质量的字体通常包含一系列的精美设计元素，如果不利用字体设计师（或销售商）为我们提供的这些元素，将是不明智的。

你期望的字体的最小包应该包括不同的字重和斜体。传统上，它是通过创建单独的字体文件来实现的。一个用于 Helvetica 常规版，一个用于 Helvetica 粗体，分别还有 Helvetica 常规斜体和 Helvetica 粗体斜体的文件。但随着 OpenType 功能的引入，我们可以将所有这些字体打包到一个文件中，并添加许多其他有用的功能。我们将介绍其中一些最有趣的功能，但还有更多。

不同字体所提供的功能会有所不同，要查看您的字体包含哪些内容，请使用 Wakamai Fondue。

可变轴

开放式字体可以有一个或多个轴，通过改变其值，我们可以改变字体的外观。轴的名称（以及其他开放式字体特性）由 4 个字符组成，最流行的一个是 wght ，它控制字体的粗细。

还有一些其他常见的轴：wdth 用于宽度， slnt 用于斜度， ital 用于斜体， opsz 用于光学大小。但除了标准轴之外，字体设计师还可以创建自定义轴，进一步扩展了字体的创意潜力。

有两种方法可以操作变量字体轴。一个轴可能有自己的 CSS 属性，例如 font-weight ，它会转化为 wght 轴。对于其他轴，包括自定义轴，您需要使用 font-variation-settings 属性。

 .cls1 {
     font-weight: 451; /* wght axis */
     font-stretch: condensed;  /* wdth axis */
     font-style: italic; /* ital axis */
     font-style: oblique 40deg; /* slnt axis */
     font-optical-sizing: none; /* opsz axis */
 }

 .cls2 {
     font-variation-settings: 'MONO' 0.25;
 }

在可能的情况下，你应该尽量使用 CSS 提供的特定属性，而不是在所有情况下都使用 font-variation-settings 。使用 font-variation-settings 的一个主要问题是它与层叠样式表的兼容性较差，因为为一个元素定义此属性会完全覆盖从父元素继承的值。

想象一个场景：你有一段文本，你想要为它设置特定的宽度，并且你想要为其中的一个元素应用特定的斜体。通常情况下，你应该使用 font-stretch 和 font-style ，但为了举例说明，假设你需要使用 font-variation-settings 。你可能会尝试如下方式：

 p {
     font-variation-settings: 'wdth' 75;
 }

 .emphasis {
     font-variation-settings: 'slnt' -5;
 }

重点元素将具有正确的斜体，但是其宽度将被重置为默认值。为该元素设置变体设置的正确方法是明确定义两个轴的值。

 .emphasis {
     font-variation-settings: 'wdth' 75, 'slnt' -5;
 }

为解决这个问题，我们可以使用 CSS 变量。

 :root {
     --wdth: 100;
     --slnt: 0;
 }

 * {
     font-variation-settings: 'wdth' var(--wdth), 'slnt' var(--slnt);
 }

 p {
     --wdth: 75;
 }

 .emphasis {
     --slnt: -5;
 }

在这个网站上，你可以尝试许多不同的可变字体，其中一些字体具有非常有趣和不寻常的轴。

除了轴线之外，还有一些预定义的 OpenType 功能可以开启或关闭（有时它们还允许您选择预定义的值）。接下来我们来谈谈其中最受欢迎的一些功能。

交替

字体可以包含某些特定字符的替代字符。这包括不同风格的数字、装饰笔画、联字符，以及某些字符的替代风格。但具体可用的内容会因字体而异。

文本变体

以风格替代字体开始。这些是字体中可以启用的字母的替代形式。在某些字体中，它可能会改变 'I'、'l' 和 '1' 的外观，以区分它们，在其他字体中，它只是用双层替代替换单层的 'a' 和 'g'。与风格替代相关的 OpenType 功能有 3 种，它们在某种程度上存在重叠。

首先，有一个 salt 设置 用于启用所有字母的风格变体。正式设置可能会改变 'a' 和 'g' 的外观。

然后是风格集。它们以 ss01 、 ss02 等命名。它们只用替代字符替换字符子集。集可能有超越仅仅改变视觉外观的目的，例如，字体 Inter 有一个风格集 ' 消歧 '，它改变了可能与其他字符看起来太相似的字符的外观，比如 'I' 和 'l' 或 '0' 和 'O'。

最后，还有字符变体（如 cv01 、 cv02 等），它们只替换单个字符。

在网页上使用替代字体有两种方法。您可以像直接操作坐标轴一样直接启用 OpenType 功能：

 h1, h2, h3 {
     font-feature-settings: 'salt' on, 'ss01' on, 'cv06' on;
 }

这与 font-variation-settings 非常相似，也存在与继承相关的问题。另一个（较新的）选项是使用 “原生” 的 CSS 属性 font-variant-alternates 。要使用它，我们首先需要将用户自定义的值映射到将传递给 OpenType 字体的值：

 /* This is set per font */
 @font-feature-values "Work Sans" {
     /* salt feature */
     @stylistic {
         /*
         'on' is the value which we'll use in styles, while
         1 is what will be passed to OpenType font.
          */
         on: 1;
         off: 0;
     }

     /* ss01, ss02, ... */
     @styleset {
         /*
         alt-digits is the name for the set we'll use in styles,
         while 1 is its number (translates to ss01)
         */
         alt-digits: 1;