Glyphs如何创建 Apple 彩色字体(sbix)
时间:2019-09-20 浏览次数:125 编辑:user07
在 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 和 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 上。
相关文章
-
Glyphs怎么绘制高质量的路径
画得不好的轮廓会很让人头疼。你的字母可能看上去被搞乱了,或者干脆显示不出来。记下一些基本的规则,你就能避免这些麻烦。小编现为您带来Glyphs绘制高质量的路径教程,希望对您有所帮助!
浏览:153 时间:2019.09.18
-
如何在Glyphs 中增加字符轮廓?
如何在Glyphs 中增加字符轮廓?有好多种方法在字体中增加字符轮廓,让我们从效果最显著的方法开始介绍,希望对您使用Glyphs有所帮助!
浏览:289 时间:2019.10.11
-
Glyphs创建Webfont(网页字体)教程
当你需要在网页上使用自定义字体时,你便需要 webfont。制作 webfont 时,文件大小是主要需要关心的,越小越好。一个好的单一文种字集需要在 20K 以下。(译者注:汉字另议。)
浏览:191 时间:2019.10.07