创建 Apple 彩色字体(sbix)
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 512
、iColor 256
、iColor 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 ,必须满足以下三条标准:
- sbix 字符形必须同时包含轮廓,即使是两个小小的路径。它们定义了 Photoshop 的裁切定界框。如果没有轮廓,一切都被裁切掉了,你将看不到任何像素图像。
- 字体必须被安装在系统中(字体册)。Adobe 字体文件夹 会不可用。我们建议每次导出时使用不同的名称,来 避免字体缓存问题。
- 每次安装后,你必须重启 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 (三言).