创建 SVG 彩色字体

  • by Rainer Erich Scheichelbauer
  • Tutorial

查一下“SVG”,你会发现它代表 “可缩放矢量图形”。不错,但当我们在字体领域里使用这个术语时,它实际上意味着不同的东西。

SVG 字体格式

起初,有过一种 webfont 的字体格式叫 SVG。其扩展名为 .svg 或压缩格式 .svgz。请立刻忘掉它,因为这种格式只在早期 iPhone 上的 Safari 中被支持。所幸它已经绝迹了。比起其他字体格式,这种格式体积巨大,且仅包含单纯的轮廓。这意味着:没有字偶间距、没有渲染提示、没有 OpenType 表能够提供的其他好东西。换句话说,它根本就不是个 OpenType 字体。Glyphs 是一款 OpenType 字体编辑器,因此不能用于制造这样的 SVG 字体。

本篇教程并非关于旧版 SVG 字体格式。

OpenType SVG 表

今天广泛使用的 webfont 格式为 WOFF,以及逐渐站稳脚跟的 WOFF2。可以说的有很多,但简而言之,WOFF 就是压缩过的 OpenType 字体。它的桌面版同胞 CFF/OTF 以及 TTF,也是 OpenType 格式,各有特点但都不如 WOFF 压缩得好。OpenType 字体之所以为 OpenType 是因为其内部结构,即所谓“OpenType 表”的集合。其中一个“OpenType 表”便可以是“SVG 表”,其中包含基于SVG的信息。包含这样 SVG 表的字体,有时被称作“OpenType-SVG 彩色字体”或“SVG 彩色字体”。

本篇教程即是关于OpenType-SVG 彩色字体。

在 Glyphs 中,有两种方法可以将 SVG 信息导入一个字体:(A)从单独的 .svg 图像文件导入,或者(B)从已设置好的彩色字体导入。后者既可以是基于不同母版的分层字体,也可以是含被索引的“Color”图层的 CPAL/COLR 字体,或带有“iColor”图层的 Apple 格式的 sbix 字体。

方法 A:从 SVG 图像文件导入

如果你已经有了单独的 SVG 图像文件可用,你可以把它们放置在相应的字符形中,然后导出具有 SVG 表的字体。此种方式可以让你充分利用 SVG 文件格式的优势,包括像矢量动画这样的疯狂玩意儿。

现在我们开始作准备,建议你将 .glyphs 文件保存在你希望的位置,并且创建一个名为“Images”的次级文件夹用于存放 SVG 文件。这是因为只有这些图像的相对路径会被存储在 .glyphs 文件中,当它们位于次级文件夹时,更易于保持它们处在同一位置。

现在我们需要一个例子。我们为大写字母 O 尝试一个红色圆形的旋转动画。选择并复制(Cmd-C)这段 SVG 代码:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1000" height="1000" viewBox="-400 -400 800 800">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="100" r="200" stroke="none" fill="red">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"
   to="360"
   begin="0s"
   dur="1s"
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

打开你选择的纯文本编辑器,例如TextMateSublimeText,或者Atom,把它粘贴(Cmd-V)进一个新窗口。

然后,在 Images 文件夹中保存该文件为“O.svg”。这样,在 Finder 中,你的整个设置看上去是这样:

回到 .glyphs 文件,准备好大写字母 O。打开编辑视图,在“图层”面板中,点击“Copy”按钮为图层创建副本,重命名为 svg。完成后,它看上去应该像这样:

现在是重点:在母版层里放进不论什么内容,都将是黑白的回退字符形,可见于无法显示 SVG 表中所存储的彩色信息的应用程序。顺便说一下以免你有疑惑:“母版层”即是“图层”面板中的粗体字图层,在本例中是名为“Regular”的图层。

但是在新建的 svg 层中,你可以将 .svg 图像文件拖放进来。它应该会立即显示出来,不过没有动画效果。你可以随意缩放和移动图像:

关于边距要注意的一点:svg 层会从其母版层继承字宽,所以如果你需要调节字距,你需要回到母版层。本例中,如果你没有缩放置入的 SVG,把字宽设置为 800 比较合适。在“图层”面板中点击“Regular”层,然后再灰色信息框中将宽度改为 800:

不管怎样,将字体导出为 webfont:“文件 > 导出 > Webfont”,使用 WOFF 或 WOFF2 格式。选择 CFF 或 TTF 都无所谓。

在 Mac 上,Firefox 是唯一支持 OpenType-SVG 字体的浏览器。在 Windows 上, Microsoft Edge 也支持。所以如果你想测试你的 OpenType-SVG 字体,你必须能够运行这些浏览器。为此,你既可以调出一个包含 HTML 和 CSS 代码的 HTML 文件来显示 WOFF,或者从mekkablue 脚本库中调取运行“Test > Webfont Test HTML”脚本。此脚本会在最近使用的 webfont 导出位置为当前字体创建一个 HTML 文件。

如果你还不熟悉脚本,花一分钟浏览一下该脚本 readme 文档中的安装说明,据此安装脚本。然后,按住 Option 键的同时,选择“Script > Reload Scripts”(Cmd-Opt-Shift-Y)。

该脚本为你方便地打开了封闭文件夹。现在,只需将 HTML 文件拖放到 Dock 中的 Firefox 图标上(或者右键单击并选择“打开方式 > Firefox.app”),键入大写 O,搞定:

嗒哒!不过当心,字体中的动画非常消耗处理器资源。它会让你的电脑风扇狂转,手机用户则会因你耗尽了他们的电量而感到心情复杂。我们可提醒过你了哦。

方法 B:从既有的彩色字体导入

你可以从多母版的分层字体开始,也可以从带有索引图层的 CPAL/COLR(即 Microsoft 彩色字体)或 Apple 格式 sbix 字体开始。

如果是 CPAL/COLR: 按教程中的步骤操作。确保你在“文件 > 字体信息 > 字体母版”中的“自定义参数”区域里设置了“Color Palettes”参数,并将“Color”图层编号,即 Color 0、Color 1、Color 2,等等。(如果你想在 SVG 中使用不同的颜色,考虑使用“Color Palette for SVG”参数。它允许你为该子样指定自定义调色板。

如果是分层字体: 按教程中的步骤操作。确保你在“文件 > 字体信息 > 字体母版”中通过“Master Color”参数设置了颜色。

在这两种情况下:在“文件 > 字体信息 > 字体子样”中创建一个包含 SVG 表的子样。将它命名为“Regular”或“Multicolor”或“SVG”或你认为合理的任何名字。然后为新的子样添加“Color Layers to SVG”自定义参数,确保其“值”为勾选状态:

如果是 sbix: 按教程中的步骤操作。在“文件 > 字体信息 > 字体子样”中创建新的子样,添加“SBIX to SVG”自定义参数,将“值”设定为想要的 iColor 尺寸。这个操作将从具有相同索引尺寸的 iColor 层中获取 sbix 图片,并将其转换为 SVG 图像。例如,如果你在自定义参数中指定值为 256,Glyphs 将查找所有 iColor 256 层并将它们转换为svg。

现在通过“文件 > 导出 > Webfont”(Cmd-E)导出。至此全部完成,如前所述在 FireFox 中测试字体吧。(参见“方法 A”)

更多自定义参数

在“文件 > 字体信息 > 字体子样”(Cmd-I)的“自定义参数”中,你可以添加以下三个中任一参数:

  • Export COLR Table
  • Export SVG Table
  • Export sbix Table

这些参数是用于控制生成哪些颜色表并将其实际转换为 OpenType 字体,和不生成哪些颜色表。要减小 webfont 文件大小,你可能希望启用其中一个表的导出,而禁用所有其他表。例如,如果使用“方法 B”中所描述的方法基于 CPAL/COLR 的设置导出 SVG 表,你可能会想要禁止创建 COLR 表。

关于 SVG 的更多信息

我们才刚入门,要了解 SVG 及其所有可能性,需要深入学习其技术文档和示例代码:

本文写作时,SVG 表已被 Firefox、Windows 10 以上以及 Adobe 应用程序支持。


2017-01-20 更新:在支持浏览器列表中增加 Microsoft Edge。
2018-03-26 更新:增加 sbix-to-SVG 转换。
2018-04-14更新:更新 SVG 的操作系统及应用程序支持,感谢 Behdad!
2019-02-01 更新:修正录入错误,并将 brothers 改为 siblings(指英文版原文),感谢 Nathalie!(中文版措辞为“同胞”而非“兄弟”)

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