前言
介绍了高质量字体的 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;
disambiguation: 2;
}
/* cv01, cv02, ... */
@character-variant {
/*
This notation is a bit different: here, simplified-u will be used
in styles, but 6 means that it should enable sixth character
variant, OpenType feature cv06
*/
simplified-u: 6;
compact-f: 12
}
}
h1, h2, h3 {
font-variant-alternates: stylistic(on) styleset(alt-digits) character-variant(compact-f);
}
虽然这种方法确实更易读，但它也存在与级联相同的问题。因为在元素上定义 font-variant-alternates 会覆盖父级值而不是对其进行扩展，因此无论如何，您都需要使用 CSS 变量的技巧来解决这个问题。
处理
有些字体带有花饰，可用于为标题增添个性。与风格交替类似，启用装饰有以下两种方式：
h1, h2, h3 {
font-feature-settings: 'swsh' on;
}
@font-feature-values "Work Sans" {
@swash {
on: 1;
off: 0;
}
}
h1, h2, h3 {
font-variant-alternates: swash(on);
}
数字
一种字体可以为数字设置不同的字形。通常，数字可以是衬线体或旧式体，也可以是表格体或比例体。这两种类型可以结合使用，因此你可以有例如旧式表格数字这样的字形。
表格数字都有相同的宽度。就像等宽字体一样，但仅限于数字。由于在多行输入时这些数字会对齐，因此它们在表格数据中非常有用：表格、账单、报告等。比例数字的宽度不同，因此 1 和 6 会占用不同的空间。它们用于文本块中的数字，因为它们的宽度和间距不会与周围的文本形成对比。
衬线数字的基线对齐，它们的高度相同，通常与大写字母相同。等比例衬线数字是最佳的默认选择，因为它们在 UI 元素和正文文本中看起来都很好。然而，由于它们的大小和对齐方式，一些设计师不喜欢在正文文本中使用比例线数字，因为他们认为这样的数字乍一看像是大写字母，多个大写字母一起会吸引过多的注意力。他们更倾向于使用老式数字：这些数字的高度与小写字母相同，并且有下降和上升的部分（字符的笔画，向上或向下延伸），这使它们能够更好地与周围的文本融合。
默认使用的数字取决于所使用的字体。若要明确设置所需的样式，请使用 font-variant-numeric 属性：
table {
font-variant-numeric: tabular-nums;
}
/* You can combine values too */
.foo {
font-variant-numeric: tabular-nums oldstyle-nums;
}
小型大写字母
我之前提到，当大写字母被正文文本包围时，它们会吸引过多的注意力。具体有多明显取决于字体。例如，在 Work Sans 字体中，虽然并不特别显眼，但仍能起到吸引注意力的作用。
为了解决这个问题，一些字体会捆绑一种特殊的字母变体，称为小写大写字母。为了混淆视听，小写大写字母会替换小写字母，而不是大写字母，这样在文本设置为小写大写字母时，你仍然可以区分大小写。或者，你可以强制浏览器也将大写字母转换为小写大写字母。
要让浏览器使用小写字母显示文本，需要指定 font-variant-caps 属性。
.small-caps {
/* Will turn lowercase into small caps */
font-variant-caps: small-caps;
}
.all-small-caps {
/* Will turn everything in small caps */
font-variant-caps: all-small-caps;
}
如果当前字体没有小写字母，浏览器将尝试从普通大写字母中合成小写字母。如果您想禁用此行为，请使用此 CSS 属性。
:root {
/* Disable all synthesis: missing weights, italic, small caps, etc.*/
font-synthesis: none;
/* Disable only small caps synthesis */
font-synthesis-small-caps: none;
}
上下文关联字符
上下文变体是我最喜欢的字体功能之一，主要原因是它不需要开发者或输入文本的人额外的工作，它会自动工作。当然，前提是字体设计师在他们的字体中添加了上下文变体。这个功能会根据周围的字符来替换字符的字形。
这可以用来替换 “->” 符号，用一个合适的箭头来代替。或者在大写字母之间调整 “@” 的位置。Inter 在这方面做得非常好：
你甚至不需要手动启用它们，上下文相关的备选字符会默认启用。但如果你想禁用它们，有一个 font-variant-ligatures 属性：
:root {
font-variant-ligatures: no-contextual;
}
今天就到这里，但我们只是触及了表面。OpenType 还有很多功能，比如装饰、序数、分数、随机、历史形式、连字等。如果你想深入探索，这里有一个展示 OpenType 功能的不错网站。请查看 Roel Nieskens 关于 OpenType 功能的演讲。变量字体入门是一个学习变量字体的优秀资源。
关于本文
译者：@飘飘
作者：@Oleh
原文：https://sinja.io/blog/get-maximum-out-of-your-font
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
