可变字体简介(2019)

早在我们能够在网络上使用字体之前，排版就一直是我的浓厚兴趣。虽然我们现在已经有能力做到这一点已经有十年了，但我们总是受到平衡我们想要使用的字体数量和查看器下载的数据量的限制。虽然好的字体和排版可以给设计、可读性和整体体验带来巨大的好处，但如果字体太多，会对性能产生负面影响，进而影响用户体验。三年前，OpenType字体格式的演变被引入，它以一些非常了不起的方式改变了事情。

只要我使用了数字字体，我就必须为我想要使用的每个宽度、粗细或变体安装单独的文件。一个文件是粗体，另一个是浅色，另一个文件又是浓缩的斜体。安装用于台式机的整个系列可能涉及近100个文件。可变字体格式是OpenType(我们都使用了多年的格式)的演变，它允许单个文件将所有以前分离的文件包含在一个高效的文件中。类型设计者可以决定要包括哪些轴，并定义最小值和最大值。

在网络上，这意味着我们可以加载单个文件，并使用CSS在允许范围内的任何位置设置任何轴，而不会被浏览器人为扭曲。某些字体可能只有一个轴(粗细是最常见的)，而有些字体可能有更多轴。有几个被定义为“注册”轴，它们是最常见的：宽度、重量、倾斜、斜体和光学大小-但格式是可明确扩展的，以便设计师可以定义他们自己的自定义轴，并允许他们想要创建的任何类型的变化。让我们看看它在桌面上是如何工作的。

新格式保持与其他尚未明确支持可变字体的应用程序的向后兼容性的方法之一是所谓的“命名实例”--它们本质上是过去独立文件的映射别名。因此，无论字体设计者想要什么“粗体压缩”，都会简单地映射到粗细和宽度的变化轴上的相应点。如果字体制作正确，这些实例将允许在最新版本的Windows和MacOS中安装和使用该字体，就像以前一样。

如果应用程序完全支持可变字体，那么您还可以根据需要操作各个轴。目前包括Adobe Illustrator、Photoshop和InDesign的最新版本，以及流行的Web/UI设计应用程序Sketch的最新版本。

要获得字体支持的所有细节，特别是在网络上使用，你需要做两件事中的一件：查看以下网站，或者下载Firefox(或者更好的是，两者兼而有之)。

如果你有字体文件并且可以上网，去看看Roel Nieskens的WakamaiFondue.com(我的字体能做什么…。明白了吗？)。只需按照指示拖放字体文件，就会在那里生成一个报告，显示字体具有哪些功能、支持的语言、文件大小、字形数量以及字体支持的所有可变轴，并显示低/高/缺省值。你甚至得到了一个类型测试器和一些滑块，让你可以玩不同的轴。记下轴、值和默认值。当我们开始编写CSS时，我们将需要这些信息。

如果你无法访问字体文件(例如，如果它托管在其他地方)，你仍然可以简单地在网页上使用它，然后用Firefox开发工具检查它，就可以获得所需的信息。上面有很多精彩的视频(像这个和这个)，但这里是简短的版本。

多亏了Jen Simmons和FF开发工具团队，我们有了一些令人难以置信的工具来在浏览器中处理网络字体。检查您要使用的字体中的文本元素，然后单击右侧的“字体”选项卡。然后，您将看到一个信息面板，其中显示有关字体、大小、样式和变化轴的所有信息！您甚至可以更改这些值中的任何一个，并在浏览器中看到它的正确呈现，如果您随后单击“更改”选项卡，您可以轻松地复制和粘贴更改后的CSS以将其带回您的代码中。

现在您已经有了所有可用的轴、值、默认值以及它们对应的4个字符的轴“标记”-让我们看看如何在实践中使用这些信息。首先要注意的是，五个“注册”轴的标签都是小写的(wight、wdth、ital、slnt、opsz)，而自定义轴标签总是大写的。浏览器注意到了这一点，大小写不匹配可能会导致不可预测的结果。

有两种方法可以实现已注册的轴：通过其相应的标准CSS属性，以及通过字体变体设置的较低级别语法。尽可能使用标准属性是非常重要的，因为这是浏览器知道由于某种原因没有加载可变字体时要做什么的唯一方法，或者是让任何替代浏览方法从我们的CSS推断任何类型的语义(即，较重的字体粗度值表示更粗体的文本)。虽然字体变化设置正是我们应该用于自定义轴的(目前，使用斜体或斜体和斜轴)，但在所有支持可变字体的浏览器中都完全支持字体粗细(Wight)和字体伸展(Wdth)。现在让我们来看看这五个注册的轴以及如何使用它们。

也许最明显的轴心是粗细--因为几乎每种字体的设计都至少有规则和粗体，而且常常是更轻/更细和更粗的极端。对于可变字体，您可以使用标准属性font-weight，并提供一个介于为字体定义的最小值和最大值之间的数字，而不仅仅是一个关键字，如NORMAL或BOLD。根据OpenType规范，对于任何给定的字体，400应该等同于普通字体，但在实践中，您会发现目前它可能会因字体而异。

除了可以在超薄的大引号上使用更宽的范围，或者在超大的引号上更加强调之外，你还应该尝试改变一下“大胆”的含义。对内联正文的粗体文本使用“稍微不那么粗体”的值(即“strong”标签)可以使文本更易读，同时仍然很醒目。重量越重，字体就越封闭，所以通过在小尺寸上变得更细微一些，你仍然可以在保持更开放的感觉的同时获得强调。尝试将Strong设置为500-600之间的字体粗细，而不是默认的700。

字体设计的另一个常见变化是宽度。它通常被认为是“压缩的”、“压缩的”或“扩展的”--尽管这些关键字的具体含义完全是主观的。根据规范，100应等于“正常”宽度，有效值的范围从1到1000。与Weight类似，它确实映射到现有的CSS属性-在本例中是命名糟糕的font-stretch属性，并以百分比表示。在采用的早期阶段，许多字体设计者和铸造厂在数字范围上并不一定遵守这个标准，所以它在您的CSS中可能看起来有点奇怪。但是3%-5%的宽度范围仍然有效，即使在这种情况下5%实际上是正常宽度。我希望，随着更多的推动，我们将看到更多的标准化出现。

响应性设计的一个棘手之处是确保你的大标题不会在小屏幕上变成每行一个字的可怕考验。除了调整字体大小外，还可以试着将标题稍微变窄一些。通过将字体变得更小，您可以在不牺牲重点或层次的情况下，每行容纳更多的单词。

斜轴线或多或少和你预期的一样。在大多数情况下，它是布尔值0或1：OFF(或直立)或ON-通常表示笔划倾斜，通常表示字形替换。通常情况下，小写的“a”或“g”的斜体形式略有不同。虽然当然可以有一个范围，而不是严格的0或1，但是关闭/打开方案可能是您遇到的最常见的情况。不幸的是，虽然它打算映射到font-style：italic，但这是浏览器尚未完全解决实现问题的领域之一，因此我们不得不依赖于较低级别的字体变体设置语法。您可能会考虑将其与CSS自定义属性或变量结合使用，这样就不必重新声明整个的

拥有斜体和直立字体，以及重量和任何其他可用的轴，意味着您可以使用一个或两个文件而不是4个文件来处理您的正文副本。有了可用轴的范围，您可能就不需要其他任何东西了。

斜轴与斜轴相似，但在两个关键方面不同。首先，它表示为度范围，根据OpenType规范，它应该是‘大于-90且小于+90’，其次，不包括字形替换。通常与无衬线字体设计相关联，它允许指定范围内的任何值。如果您使用的字体只有一个斜轴，没有斜体(稍后我将讨论这一点)，您可以使用‘font-style’的标准属性，如下所示：

如果您有两个轴，您将需要使用字体变化设置-尽管在本例中您只提供了一个没有deg的数字值。

斜轴允许在定义的范围内进行任何操作，因此有很多机会将角度设置得稍有不同，或者添加动画，使文本在页面加载后稍稍变为斜体。这是以一种非常微妙的方式将注意力吸引到屏幕上的文本元素上的一种很好的方式。

这是一颗真正的宝石。这是一种可以追溯到400多年前的做法，根据这种做法，物理上较小的字体会被切割成笔划稍粗、对比度稍低的字体，以确保它们在较小的尺寸下打印得很好，而且容易辨认。其他方面也可以量身定做，比如光圈更宽，终端角度更大，或者碗更大。相反，更大的点尺寸会被切割得更精细，允许更大的对比度和更精细的细节。虽然这在许多方面是由于质量较差的墨水、纸张和文字造成的，但它仍然具有允许单一字体设计在不同物理尺寸范围内最佳工作的效果。然而，随着照片排版和数字排字的转变，这种做法已经消失了。这两种较新的做法都会采用单一的轮廓并对其进行缩放，因此要么所有人都会丢失精细的细节，要么较小的尺寸最终会变得细长而脆弱(特别是在早期的低分辨率屏幕上)。以可变轴的形式重新获得这项技术，给个人设计带来了巨大的范围。

其概念是该轴的数值应该与呈现的字体大小相匹配，并且引入了一个新的属性：font-opular-size。缺省值是auto，这是所有发布的浏览器都支持的行为(好吧，只要Chrome79发布)。您可以强制将其设置为OFF，也可以通过字体变体设置设置一个显式的值。

请参阅CodePen上Jason Pamental(@jpamental)的Pen Variable Fonts Demo：Optional Size(Auto)(钢笔可变字体演示：光学尺寸(自动))。

请参阅CodePen上Jason Pamental(@jpamental)的Pen Variable Fonts Demo：Optional Size(Manual)(钢笔可变字体演示：光学尺寸(手册))。

一个好的光学尺寸轴可以在较小的尺寸下使文字更易读，并且根据使用的尺寸进行裁剪会产生显著的差异。另一方面，增加的笔触对比度(以及文字设计者决定改变的任何其他内容)可能意味着，与正文副本相比，当标题使用较大的字体时，单一字体的感觉可能会完全不同。只要看看大卫·乔纳森·罗斯(David Jonathan Ross)月度字体俱乐部(Font Of The Month Club)中的罗斯林代尔(Roslindale)就知道它能有多大的不同。我所有的标题和正文都使用一种字体，感觉完全不同。

我不确定规范的创建者在编写时是否考虑到了这一点，但从技术上讲，没有理由不为倾斜(即角度)和斜体(即字形替换)设置不同的轴。事实上，DJR和斯蒂芬·尼克松(Stephen Nixon)都做到了这一点，分别是罗斯林代尔意大利公司(Roslindale Italic)和递归公司(Recursive)。使用Recursive，您可以看到通过将角度与字形分开可以获得多大的灵活性。它可以赋予文本块完全不同的感觉，使其具有没有替代形式的角度。根据斜体实现的状态以及它们共享相同CSS属性的事实，这需要使用字体变体设置来单独设置属性。

：root{--text-ital：0；--text-slnt：0；}body{font-variation-settings：'；ital'；var(--text-ital)，'；slnt'；var(--text-slnt)；}em{--text-ital：1；--text-slnt：12；}.斜体{--text-slnt：12；}.仅斜体表单{--text-ital：1。

请参阅CodePen上Jason Pamental(@jpamental)的Pen Variable Fonts Demo：Slant and Italic。

将这些轴分开可以在创建排版系统时提供更大的设计灵活性。在某些情况下，您可能只选择倾斜，在其他情况下，角度和字形都可以替换。虽然它可能不是最关键的功能，但它确实为字体的实用性和动态范围增加了额外的维度。

虽然到目前为止只有五个“注册”轴，但字体设计师也可以创建他们自己的轴。字体设计的任何方面都有可能成为一个轴。有更“预期”的，如衬线形状或x-高度(小写字母的高度)，也有更具创造性的，如“重力”或“酵母”。我会让其他人详细说明这些，但我会展示一个我希望在文本和UI设计中变得更常见的例子：GRADE。

字体中“等级”的概念最初是为了补偿不同类型的纸张和印刷机上的墨水增加，以此作为一种在整个工作流程中进行视觉校正的方式，并使每个工作流程上的字体看起来都是相同的。其概念是，您实质上是在不更改间距的情况下更改字体的粗细。将此作为可变轴在以下几个方面很有用。创建一个对比度更高的模式，在这种模式下，文本在没有回流的情况下会变得稍重一些，这可以使文本在光线较弱的情况下或在设计为“暗模式”时更清晰。在制作界面元素动画时，可以在悬停或轻击时添加稍重的文本等级以及背景颜色变化。它还可以在响应分辨率较低的屏幕时派上用场，因为在这种屏幕上，文字很容易变得有点细长。请注意，需要在所有大写字母中指定自定义轴。

我认为等级轴最大的用途将是辅助功能--设计暗模式或高对比度模式。但您也可以通过UI动画获得一些乐趣，比如使按钮上的文本更重，或者在悬停或焦点上导航，而不会改变文本占用的物理空间。

令人高兴的是，对可变字体的支持相当不错：MacOS和Windows的最新版本提供了操作系统级别的支持，这意味着它们可以安装在您的系统上，如果字体有任何“命名实例”，它们将显示在任何应用程序的字体菜单中，就像它们是独立的字体一样。如果您使用的是Adobe CC Applications Illustrator、Photoshop或InDesign的最新版本，或Sketch的最新版本，则可以操作所有可用的轴。在浏览器中，它更好，而且已经有相当长的一段时间了。根据CanIUse.com的数据，这一比例约为87%，但对大多数人来说，更相关的是，主流移动平台和所有主要的出货浏览器都支持它们。

唯一真正明显的例外是IE11，鉴于您可以很容易地使用@Supports来确定包含可变字体的范围，因此现在将它们投入生产是完全安全的。这是美国佐治亚州新的网络平台上正在使用的策略，到目前为止，它已经部署在40多个网站上，并愉快地为州政府雇员(IE11是他们的默认浏览器)提供静态字体，为全州数百万公民提供可变字体。

由于CSS总是在采取任何其他操作之前完全解析，因此您可以确保浏览器永远不会同时下载这两个资源。

现在，你们中的许多人可能会自我托管你的可变字体，因为在这一点上，只有谷歌通过他们的API提供它们，而且到目前为止只有测试版。在构建@font-face声明的方式上有几个主要区别，所以让我们来看看。

@font-face{font-family："；Family Name"；；src：url("；YourVariableFontName.woff2"；)格式("；YourVariableFontName.woff2"；)，url("；YourVariableFontName.woff2"；)格式("；woff2-Variations"；)；font-weight：[low][high]；

您可能注意到的第一件事是src行有点不同。我已经包含了指向同一文件的两种语法，因为官方规范已经更改，但是浏览器还没有跟上。因为我们在地平线上除了可变的字体之外还有彩色字体(而且有些字体可能既是可变的又是彩色的)，所以语法需要更加灵活。因此，第一个条目可以为同时支持这两种颜色的字体指定“woff2支持变化颜色”。一旦浏览器理解了该语法，它们将在到达此处后停止解析‘src’行。现在，他们将跳过这一步，使用woff2格式的第二个变体，所有当前支持可变字体的浏览器都能理解这一点。

对于粗细(font-weight)和宽度(font-stretch)，如果有对应的轴，请提供下限和上限(带有宽度值的百分比符号)。如果没有对应的轴，只需使用关键字‘Normal’。如果存在倾斜轴，则在每个数字后提供低值和高值‘deg’。值得注意的是，如果也有斜体轴(或者只有一个斜体轴，没有倾斜)，那么在这一点上最好完全省略字体样式线。

通过提供这些值，您可以创建一些护栏，以帮助浏览器知道在CSS请求超出允许范围的值时该如何操作。这样，如果粗细范围是300-700，而您意外地指定了font-weight：100，浏览器将简单地钳制到300，而不会尝试合成较轻的粗细。值得注意的是，这只适用于标准CSS属性，如font-weight或font-stretch。如果您使用字体变体设置来设置值，则浏览器会假定您是专家，并会尝试合成结果，即使结果超出了正常范围。

早在9月份，Google字体团队就宣布了他们API的测试版，支持一些可变字体。这种支持正在增长，而且越来越多的字体即将问世。如果你今天想尝试一下它，你可以看一看我写的一篇关于如何使用它的文章，看看我创造的一个正在使用它的CodePen。

你应该首先寻找可变字体的地方是Nick Sherman的v-fonts.com，它一直是一个事实上的目录站点，列出了几乎所有可用的可变字体。您还可以在GitHub上查看一下，在那里您可以找到一系列项目(处于不同的完成阶段，但也有一些不错的项目可以找到)。尼克还维护着一个Twitter账户，它会发布/转发大量公告和链接，我还会发布一份关于网络排版的时事通讯，在那里我通常会包括一些值得注意的发布的链接。

您还可以访问Laurence Penney的Axis-Praxis.org站点，这是一个原始的可变字体游乐场，您可以在那里放置许多。

..