教程 可变字体
No.07 Variable Fonts

如何制作 可变字体

制作可变字体之前,您需要先了解几件事。本教程演示如何基于现有的非可变字体来创建可变字体。

教程序号: 07
官方原文: high-logic.com
内容状态: ✅ 基于完整内容创建

可变字体的概念已经存在了几十年,但直到 2016 年,这项技术才被 OpenType 规范采用。

可变字体是单个文件,包含一个或多个轴(例如字重或宽度),允许您通过插值使用连续范围的样式变化。FontCreator 允许您导出可变字体,但它也可以用于通过单击导出所有预定义的样式(命名实例),因此您可以更快地制作字体。

本教程展示如何从两个现有的(非可变)字体创建可变字体。

我们假设您已经制作了字体族的常规和粗体版本。要开始,请在 FontCreator 中打开它们。

字重轴

由于我们结合了两个不同字重的字体,我们需要添加字重轴。

激活常规样式(1)并打开字体属性面板(2)。

从那里,转到轴选项卡(3)并单击 [+] 工具栏图标并选择字重(4)。

字体属性 - 轴选项卡

粗体主字体

在字体属性面板中,选择主字体选项卡。单击 [+] 工具栏图标并选择粗体字体。这将把粗体字体中的所有字形轮廓复制到这个字体中。

注意:此时您可能会注意到字体概览面板中的几个字形突然有红色背景标题。这表示这些字形存在兼容性问题,因此插值将失败。我们将在本教程后面介绍这一点。

我们需要更新两个主字体的轴位置。选择常规主字体并将位置设置为 400。对于粗体主字体,将其设置为 700。

此时我们已经有一个可变字体了。做得好!

初步印象

如果您对目前的结果感到好奇,我们也是。

要使用字重轴,我们需要访问变化面板。如果它尚未可见,请从主菜单中选择视图 -> 面板,然后确保已选中变化。您也可以使用快捷键 Ctrl+F7 切换此面板的可见性。

变化面板允许您预览主字体之间的位置。使用字重滑块,您将看到轮廓自动插值。

我们还需要使用另一个面板,让我们引入主字体和图层面板。如果它尚未可见,请转到主菜单并选择视图 -> 面板 -> 主字体和图层。快捷键 Ctrl+F6 也可以。

此面板允许您在可用的主字体之间切换。这很重要,因为字形轮廓图层始终位于主字体上。因此,如果您想调整常规字形轮廓,请选择该主字体。

测试网络字体

所以使用字重滑块很有趣,但它在 FontCreator 之外真的有效吗?

让我们看看...从主菜单中选择字体 -> 测试网络字体(或按 Ctrl+F5)。这将导出可变字体以及一个网页,该网页将在您的默认网络浏览器中打开。

兼容性问题

正如我们之前提到的,插值只有在轮廓图层兼容的情况下才能工作。因此,对于每个字形,轮廓图层必须具有相同数量的轮廓。它们也必须处于相同的顺序,并且点的数量也必须匹配。对于复合字形,字形成员必须匹配。

为了让 FontCreator 修复基本问题,我们在字体概览面板中选择所有字形,然后单击主字体和图层面板顶部的"修复"工具栏按钮。

很可能仍然有问题的字形。要修复这些,我们需要手动调整字形轮廓。双击字形以在字形面板中打开它。主字体和图层面板现在将显示一些关于兼容性问题类型的提示。

主字体和图层面板

为了进一步协助此过程,我们启用显示兼容性问题工具栏按钮,该按钮也在主字体和图层面板上可用。这允许我们查看需要进行哪些更正。最终,所有兼容性问题都需要解决,否则您的字体将出现无法正确插值的字形。

命名实例

要充分利用您的可变字体,它还应包含实例。这样,缺乏变化支持的旧软件仍然可以使用命名实例。

我们转到字体属性面板上的实例选项卡。在这里,我们更新默认实例(400)的轴位置,并添加几个字重为 500、600 和 700 的实例。我们还提供唯一的样式名称。

虽然可变字体不需要,但我们还提供正确的字重类别和宽度类别值。这些值很重要,以防我们将这些实例导出为非可变字体。所以我们几乎免费得到这些 ;-)

轴值

这里还有一件事要介绍。我们可以为轴上的特定位置(甚至轴的组合)提供名称。我们只需添加与命名实例中使用的轴位置匹配的轴值。所以我们只需添加 400、500、600 和 700。我们还为常规轴值检查属性"可省略轴值名称",因为它代表正常的字重值。