创建 SF Symbol 符号字体

本教程假定你已经看过了本届 WWDC 上 Apple 的 SF Symbol 演讲。如果还没有，请前往观看。

如果你是一位 UI 设计师，且和 Mac 平台上的开发者一同工作，他们可能已经看过了这个视频，或者对 Apple 的 SF Symbol 人机界面导则有所了解。如果没有，请将以上链接发给他们。

下载并安装

开始前，你需要 Apple 的 SF Symbols 应用程序（80MB 大小的磁盘映像）。安装磁盘映像并双击安装器（黄色的安装包）。

按照屏幕上引导操作，SF Symbols 应用程序便可安装到 “应用程序” 文件夹。

创建模板

在 SF Symbols 应用程序中，选择一个图标。因为图标数量相当多，所以并不容易做选择；不过你可以通过网格或列表视图遍览这些图标，通过左上角的字体菜单查看它们和各种系统字体样式的匹配，也可以在右上角的搜索框中搜索它们的名称（见本视频的 7:30 处）。就我而言，会选择这个爱心：

单击选择符号，然后执行 “File > Export Custom Symbol Template” （Cmd-E）。在弹出的对话框中，保留其名称不变（我这里是 heart.svg），然后选择合适的位置导出。我比较懒，直接导出到桌面。导出的模板本身是一个特殊结构的 SVG 图像（见本视频 9:50 处），看上去类似这样：

在 Apple 的视频中，你会看到设计师必须手动绘制一个图标的（9×3=）27 种变体。呃。不过你看，它看上去是不是有点像两个维度、四个母版的插值？通过 Glyphs，你只要画这些母版，然后插值出剩下的部分，还有可能需要在必要的地方插入一两个花括号图层。

导入模板

现在，回到 Glyphs 中。如果你在安装完插件后重启过软件，你会发现新增的菜单项 “文件 > 导入 > 符号模板…”：

在导入对话框中选择刚刚保存的 SVG，然后确认。Glyphs 会分析这个 SVG 并将其转换为一个 .glyphs 文件，其中仅包含你所选图标的一个字符形：

如果这个图标被指定了一个 Unicode 值，它就会从内部的字符形数据库中获得一个可理解的名称。不论如何，你现在所需要做的就是进行编辑，和你在多母版字体中所做的一样，只不过这次只有一个字符形。

如你所料，绘制轮廓、然后通过 “滤镜 > 放样路径”以及“路径 > 圆角” 甚至是 “路径 > 圆角字体” 来进行后期处理，或许是用来新增图形绘制的好办法。我会让我的爱心微笑起来：

当然了，Glyphs 为多母版编辑和管理所提供的一切功能都可任你使用：

• 按下 Opt 键并选择 “路径 > 修正所有母版中的路径方向”（Cmd-Opt-Shift-R）重置每个路径的起始点，并自动重排所有路径。这一操作通常可以（重新）建立图层兼容性。
• “滤镜 > 形状顺序” 用于手动管理母版和花括号图层之间的形状顺序：将每个图层中的图形拖动至相同的顺序，如果 “修正路径方向” 不起作用的话。
• “视图 > 显示母版兼容性”（Ctrl-Opt-Cmd-N） 来更深入地找出轮廓中影响兼容性的节点。选择红色轮廓上的节点，通过 Tab 键切换选择节点，查看它们在母版之间如何连接。
• 右侧边栏面板（Cmd-Opt-P）中的 “图层” 面板：管理图层，右键单击来重新插值，如果你不需要某个中间位置的花括号图层，只需选中它并单击 “–” 按钮。
• 在 “窗口 > 插件管理器” 中能够获得许多免费插件和 Python 脚本集。

如果这是你第一次尝试多母版轮廓编辑，确保你已读过了三篇多母版教程。并确保你理解了花括号图层都是怎么回事。

控制精度：花括号图层和网格

说到花括号图层：Glyphs 会在导入时将插值与 SVG 模板中的图标相匹配，并自动插入花括号图层。花括号图层通过在设计空间中的特定坐标处提供一个额外的中间母版来支持插值，这样就可以实现非线性的插值。你可以在 “图层” 面板中找到这样的图层，它们的名称由花括号包裹：

在图标模板中，通常你可以去掉一些这样的图层。要想确认你是否需要某个花括号图层，一个好方法是：全选路径（Cmd-A），复制到背景层中（“路径 > 将所选内容移至背景”，Cmd-J），打开 “视图 > 显示背景”（Cmd-Shift-B），然后，在 “图层” 面板的上下文菜单中重新插值。如果前景和背景层中的内容只有微妙的差异，那么你就可以在不影响形状的前提下删掉这个花括号图层。

你还可以设置一件重要的事情：网格。前往 “文件 > 字体信息 > 其他设置 > 网格间距” 和 “子网格”，根据需要的精度来增减数值。所有轮廓节点都会根据这里的设定值来吸附网格。默认地，这里只支持整数，即网格间距为 1、子网格为 1，有效网格间距也为 1÷1=1。然而，如果你需要更高的精度，可以考虑将 “子网格” 的值改为 10 或 100，这样就能得到 1÷10=0.1 或 1÷100=0.01 的实际有效网格间距——你肯定懂的。

导出符号模板

好，现在我们已经完成了所需的更改，并确保轮廓是兼容的，那么就可以再次导出模板，以便开发者能够将其插入 Xcode 中。开发者也需要一个和我们之前所导入的文件结构相同的 .svg 文件，幸运的是我们之前安装的插件不仅提供了导入选项，也提供了导出选项。所以，只需选择 “文件 > 导出…” 并在弹出的对话框中选择 SF Symbol：

点击 “下一步…” 按钮确认，SVG 就会写入你的硬盘。我的微笑爱心现在看上去像这样：

祝贺你！这就是 Xcode 项目所需的资产文件了。

---

附录：设计空间

好，这里就是详细介绍。如前文所述，符号的变体分布在一个二位的设计空间中。所谓设计空间，也是一个笛卡尔坐标系，但并非 x 轴和 y 轴，而是我们的设计轴：本例中，就是 “Weight” 轴和 “Size” 轴。Weight 轴的范围从 22 到 202，Size 轴可以在 0 到 100 之间取值。在这个定义域中，符号的变体是这样分布的：

可以看到，这些变体都被安置在设计空间中的预设位置上。“Weight” 轴的值（22 到 202）对应笔画的粗细。你会发现，较小的尺寸中笔画往往也越细。这是因为如果笔画同样粗细，小图标会显得太过紧凑、颜色更深，所以你需要将其稍微减细，以获得同样的视觉效果。字体设计师将类似这样的微调称作 “视觉调整”。

对于 “Size” 轴也是一样。数值（0 到 100）表示轴上位置的百分比。最小值（0）和最大值（100）是轴的两端，或像字体设计师一样，称之为 “极端位置”。然而，中间的尺寸，并非像你所期望的一样位于 50% 处的数学中心，而是会对于视觉加以调整，位于中心附近稍微靠近小端的位置。

好吧，我猜这个瞒不住你：你应该发现了上图中一些圆圈是实心的，另一些则是空心的。位于设计空间角落处（“极端位置”）的四个圆圈代表了四个母版的位置。中间的空心圆点通常称作子样，可以通过插值生成。

子样的位置也可能是花括号图层所设定的地方。一个花括号图层就是一个额外的母版，所以在上面的图示中，在这样的位置上的花括号图层也会把相应的空心圆点变为实心。按经验而言，你并不需要太多的花括号图层，如果运气好一点的话，甚至完全不需要。但是如果你确实要用到了，通常而言在 weight 轴 80 到 100 之间为 size 0 和 / 或 100 的位置设定一两个就够了。笔画的粗细通常在最细到中等（regular 或 medium）呈线性增大，而对于更粗的字重，所有笔画都以线性增大会让密度过大，所以某些笔画需要承担责任，比其他笔画稍细一些。此时你就需要添加一个中间母版，即花括号图层。这是字体设计师的常规做法，现在也迅速地在 UI 设计的领域占有了一席之地。

这是一份精确的概览，显示了 SF 符号中所有可能的设计空间坐标（weight，size），换句话说，就是可能需要添加花括号图层的地方：

要记住，花括号图层的数量应当尽量少。但如果你确实想在某一点添加花括号图层，请在图层面板中点击 “拷贝” 按钮，然后将名称改为花括号包裹的、逗号分隔的设计空间坐标，例如 Medium Small {87, 0}，然后重新插值（通过右键上下文菜单或齿轮菜单），再进行调整即可。

2020-11-13 更新：更新为 Glyphs 3。

Chinese translation by Willie Liu (刘育黎) from 3type (三言).