创建 Apple 彩色字体(sbix)

教程
作者:Rainer Erich Scheichelbauer
en fr zh

 

Ever wondered how those Emoji fonts work on the Mac and the iPhone? The pictures are nothing but colored bitmap images embedded in the font.

在 Apple 格式的彩色字体中,位图图像被置入了字体文件内所谓的sbix表中。每个字符形可指定不同尺寸的多个图像,因此 Apple 设备可以选择最合适的分辨率来显示该字符形。

准备不同尺寸的图片

通常,Apple 格式的彩色字体使用“便携式网络图像”(PNG)格式。JPEG 和 TIFF 也可用。其技术规范甚至允许 PDF,但 iOS 和 OSX(尚)不支持。不论选择何种格式,我们都需要在 Glyphs 之外准备好这些图像。

比如我想把 Glyphs 图标放在一款字体的大写字母 G 中。比较好的办法是在图像编辑软件如 Pixelmator“预览” 中准备不同分辨率的多个图像文件。如果你已经有了图片,那么要做的就只是创建不同的尺寸。记得这种简单的缩小操作甚至可以通过 “自动操作工作流程” 完成,当它被安装为一项 OSX 服务时,可以通过 Finder 的上下文菜单启动。

提示:创建至少一个低于 100 像素的小尺寸版本,可以有效提升低分辨率下的显示性能,尤其是在较老的设备上。

在任何情况下,我们都强烈建议将图片保存在 .glyphs 文件旁的次级文件夹中。因为 Glyphs 仅存储图像文件的相对路径,而不是文件中包含的二进制数据本身。

当然,无论你要把 .glyphs 文件移到哪里,请连同次级文件夹一同移动。否则,你将面临 Glyphs 报错“找不到图像文件”的风险。如果这发生在你身上,你会用得上“为图片设置新路径”脚本。在 GitHub 上我的 Glyphs 脚本库 “Image”文件夹中即可找到这个脚本。

设定宽度

现在,启动 Glyphs 并创建一个新字体。打开大写字母 G,改变其的宽度。母版层仅用于确定字符的度量值,并且将保持为空。

宽度应当反映图像与“每全角字宽中包含的单位数”(UPM)之间的比例。你可以在“文件 > 字体信息 > 字体”中检查 UPM 值。

在本例中,我将它的宽度值设置为 1000。因为我的图标为正方形,且 UPM 为 1000,这是 CFF OpenType 字体的推荐值,以及 Glyphs 的默认值。如果你的图形宽度只有高度的一半,可将宽度值设置为 UPM 的一半 即 500。如果它的宽度是高度的两倍,则设置为 2000。明白我的意思了吧。

创建子图层

现在,保持 G 打开,打开右侧边栏(窗口 > 右侧边栏,Cmd-Opt-P),然后看“图层”部分。选择“Regular”母版,按需点击“Copy”按钮创建子图层。你需要和 PNG 文件数量相同的子图层。

将图层重命名为iColor,后接一个空格和一个代表图片分辨率的数字。例如,iColor 512iColor 256iColor 128 以及 iColor 96

剩下的就简单了。只需把 PNG 文件从 Finder 中拖放到相应的iColor层即可。如果一切正确,你的界面应该看上去像这样:

iColor层的宽度,以及图片的任何改动(缩放或位置)均会被忽略。因此,你不需要再在字符形度量值中调整 PNG 图片。

控制宽度、缩放和位置

宽度和竖直位置均受母版层控制,即上述例子中的“Regular”层。

图片的位置被设置为母版层边线的原点,默认为图层的原点(坐标 0,0)。所以,如果你想将图片移到基线下方 100 单位,只需在 y=−100 处添加一个小小的路径,差不多这样:

重要备注:一些应用执行时(最明显的是 Chrome 中的)会根据母版层的边界框裁切(!)图像。所以,你还需要在图片右上角也添加这样一个小路径。

它可以是仅有两个节点、面积为零的封闭路径,这样便不可见。它唯一的功能就是为图片提供一个原点,这样一个小小的路径就足以实现这一功能了。这对图片的横向位移也起作用:将路径从 x=0 处移走即可。

字符形的宽度也由母版层继承而来,并仅可通过设置母版层的宽度来控制。

图片的缩放由图层名称中 iColor 之后的数字控制。技术上讲,该数字是响应全角字宽(即字号)的图片像素数。

所以,如果你的图片是 500 像素高,放在了一个叫做 iColor 500 的图层上,而你觉得它有点显小了,那么试着在图层名称里使用较小的数字,比如 iColor 450。这样,450 像素就构成了一个全角字宽,500 像素的图片就会比这个字号再大上九分之一。

垂直度量值

关于垂直度量值的一条建议:为了防止在 Apple 设备上 sbix 图片被裁切,请确保 hhea 值将图片完全覆盖。通常,在这方面唯一会出现问题的值是 hheaAscender,确保它位于图像的顶部边缘之上。 阅读更多关于如何设置垂直度量值。

导出

现在,当你前往“文件 > 导出”时,选择 OTF、TTF 或任何 Webfont 格式作为导出格式,Glyphs 会生成一个带有 sbix 表 的字体。玩得开心!你可以用免费的 TextPreview 进行测试:

等价的 SVG 表

你可以通过在“文件 > 字体信息 > 字体子样”中添加一个“SBIX to SVG”参数来扩展你的位图字体的使用(以及被支持)范围。“值”处填入你想使用的像素值:

然后相应的 iColor 图层会被复制进 SVG 表中( 阅读更多关于 SVG 字体 。)换句话说,同样的位图图片被包含在 SVG 和 sbix 这两个 OpenType 表中。此外,你还可以通过“Export SVG Table”和“Export sbix Table”控制 sbix 和 SVG 表的导出与否。这样,你可以制作一款仅 sbix、仅 SVG 或 sbix/SVG 二者兼有的字体。

Photoshop 中的 sbix

最新版本的 Photoshop CC 也可以显示 Apple 格式的彩色字体。但是对于 Photoshop 中的 sbix ,必须满足以下三条标准:

  1. sbix 字符形必须同时包含轮廓,即使是两个小小的路径。它们定义了 Photoshop 的裁切定界框。如果没有轮廓,一切都被裁切掉了,你将看不到任何像素图像。
  2. 字体必须被安装在系统中(字体册)。Adobe 字体文件夹 会不可用。我们建议每次导出时使用不同的名称,来 避免字体缓存问题
  3. 每次安装后,你必须重启 Photoshop 让 sbix 被识别。

sbix 的支持

除了 Apple 设备,Windows 10 及更高版本,以及 Linux 和 Android 设备也支持 sbix 字体的显示。最新的 Chrome 版本在每个平台上都支持 sbix(请注意前述裁切问题),Firefox 也能够显示它,但仅在 Android 和 Linux 上。


2017-08-08 更新:添加“Photoshop 中的 sbix”一节,标题首字母大写(英文版原文)。
2018-04-14 更新:添加“sbix 的支持”一节,感谢 Behdad!教程标题已更新。
2018-11-18 更新:添加关于垂直度量值的备注。
2018-11-19 更新:添加“控制宽度、缩放和位置”一节,删去了一句关于 sbix 支持的过时描述。
2018-11-29 更新:添加 Chrome 中裁切的警告,更新小路径的图片。添加自定义参数。
2018-11-30 更新:明确“sbix to SVG”。 修正错误的截图。
2019-01-28 更新:更正标题“sbix 的支持”。

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