- Adobe Fonts 用户指南
- 简介
- 字体许可
- 获取和使用字体
- Web 设计和开发
- 语言支持和 OpenType 功能
- 字体技术
OpenType-SVG 是一种字体格式,其中 OpenType 字体的全部或仅部分字形表示为 SVG(可缩放矢量图形)图稿。这样可以在单个字形中显示多种颜色和渐变。由于具备这些功能,我们也将 OpenType-SVG 字体称为“彩色字体”。
OpenType-SVG 字体使文本可通过这些图形功能来显示,同时仍允许对其进行编辑、编制索引或搜索。它们可能还包含允许字形替换或替代字形样式的 OpenType 功能。
像 Trajan Color Concept 和 EmojiOne Color 之类的彩色字体在程序的字体菜单中像典型字体一样显示,但由于许多程序尚未完全支持彩色组件,它们可能无法充分发挥其潜力。如果您的软件程序不支持字体内的 SVG 图稿,则字形将回退为纯黑色样式。这个后备样式仍然可以应用颜色,因为它将像典型的 OpenType 字体一样工作。
在 Photoshop 中使用 OpenType-SVG 彩色字体
Photoshop(CC 2017 及更高版本)支持 OpenType-SVG 字体,随附这两种字体:Trajan Color 和 EmojiOne。您的 Creative Cloud 订阅也包括了 Trajan Color,可用于 Web 和桌面。
要使用 OpenType-SVG 字体,请执行以下步骤:
- 创建一个段落或点文本类型的图层。
- 将字体设置为 OpenType-SVG 字体。这些字体中带有 OpenType-SVG 图标:
- 使用键盘键入,或者使用“字形”面板选择特定字形。要查看“字形”面板,请选择“窗口”>“字形”。
尽管您可以使用 OpenType-SVG 字体轻松键入字母,但是只有通过访问“字形”面板,您才能够应用字形替代的完整范围。例如,Trajan Color Concept 的每种字符都包含 20 个不同的样式集(如银色、铜色、钢青色和大理石色等),这些都需要通过“字形”面板来访问。
如果将文本图层转换为可编辑的形状(通过选择“类型”>“转换为形状”),则 OpenType-SVG 字体中的字符将恢复为黑白后备样式。
在 Illustrator 中使用 OpenType-SVG 彩色字体
Illustrator 支持 OpenType SVG 字体,例如 Trajan Color 和 Emoji One Color。您可以使用“字形”面板设置特定字形,也可以使用“字形”面板创建复合字形并探索其他字符变体。有关 Illustrator 中的 OpenType SVG 字体的更多信息,请访问 https://helpx.adobe.com/illustrator/using/fonts.html#OpenTypeSVGfonts。
Trajan Color Concept
Trajan Color Concept 是我们的 Adobe Type Concepts 之一:这是一种利用敏捷开发流程和缩小字符开发的字体,这样我们就能在扩展设计时将它更快地展示给具有冒险精神的客户,以获得反馈。
Trajan Color Concept 允许您从许多 (19) 种不同颜色和纹理中进行选择。由于使用如此多的精细 SVG 图稿来访问 20 个样式集中的不同颜色组合,这样会增加文件的整体大小。(如果听起来让您觉得这样会使它们难以使用,您是对的 — 这也是 Trajan Color 仍被视为概念字体的原因之一。)
Trajan Color Concept 中的默认颜色样式(金色)和前 18 个 OpenType 样式集构成了字体中所有可用的多色选项。后备样式可在尚不支持 OpenType-SVG 彩色功能的应用程序中显示,与样式集 20 完全相同。
EmojiOne Color
Emoji 字体是 OpenType-SVG 字体的一个例子。使用 Emoji 字体,您可以在文档中包含五颜六色、图形化的字符,例如表情符号、旗帜、路标、动物、人物、食物和地标等。使用 OpenType-SVG emoji 字体(如 EmojiOne 字体),您可以通过一个或多个其他字形创建某些复合字形。例如,您可以创建国家/地区的旗帜,或者更改描述人物和身体部位(例如,双手和鼻子)的某种字形的肤色。
EmojiOne Color 是 Adobe 根据由 Denis Denz 设计并由 Rick Moby 制作的 EmojiOne 图稿而制作的一种开源彩色字体。该字体包含 Unicode 9.0 中的所有表情符号,并支持 ZWJ、肤色多样性和国旗表情符号。
emoji 字体(如 EmojiOne)中的字符与键盘上的字母并不相同。它们只能通过“字形”面板、通过操作系统(Charmap (Windows) 和 Characters (macOS))或通过从在线页面(例如,emojicopy.com)复制文本来插入。
备注:
- 您也可以通过选择“窗口”>“工作区”>“图形和 Web”,然后单击“字形”选项卡来打开“字形”面板。
- 最近使用的 emoji 将出现在“字形”面板的顶行。
在 Photoshop 中,您可以插入一系列 EmojiOne 字形以生成其他字形。例如,您可以创建国家/地区的旗帜,或者更改单人或身体部位的肤色。(这不适用于两个或更多人的表情符号。)
创建国旗 EmojiOne 中的带圈字母(A、B、C、D 等)并不对应于键盘上的相应按键。当您从“字形”面板插入这些字符以组成国家/地区的 ISO 代码时,这两个字符将形成该国家/地区的旗帜。例如,使用 US 将产生美国国旗、使用 GB 将产生英国国旗,使用 AR 将产生阿根廷国旗,使用 IN 将产生印度国旗。完整的代码列表由 ISO 3166-1 定义。
创建字符变体 将单人默认字符或身体部位与五个可用菲茨帕特里克量表肤色(GID 356 至 360)中的任何一个相结合。原始的默认字符将替换为与肤色匹配的字符。这种合成目前不适用于有多个人物的字形。
备注:
- 默认的单人字符或身体部位表情符号只能与任何一个肤色字符配对一次。
- 字形序列是一种字体功能。并非所有 OpenType-SVG 字体都允许您组合多个字符以形成一个字形。
在 CSS 中使用 OpenType-SVG 字体
OpenType-SVG 字体包含可以像其他 OpenType 字体一样通过 CSS 启用的功能。请参阅使用 OpenType 功能和 CSS 中的 OpenType 功能的语法,了解如何访问这些功能。
例如,Trajan Color Concept 中设置为 OpenType 功能的其他颜色样式称为样式集,其编号为 1 到 20(ss01,ss02,ss03 等)。要将 20 种样式之一应用于 Trajan Color 中的文本集,可以使用 font-feature-settings 来应用其中一个样式集:
.Trajan-gold { font-family: 'Trajan Color Concept'; font-feature-settings: "ss01"; } .Trajan-silver { font-family: 'Trajan Color Concept'; font-feature-settings: "ss02"; }
在不支持 OpenType-SVG 字体的浏览器中,将显示后备样式(与样式集 20 完全相同)。
将 OpenType-SVG Web 字体添加到您的站点时,请记住,由于添加了与字体中的全部或仅部分字形关联的 SVG 图稿,因此它们的文件大小可能比普通的 OpenType 字体更大。
支持 OpenType-SVG 字体的应用程序
- Photoshop CC 2017 及更高版本
- Illustrator
- Firefox 32 及更高版本
- Microsoft Edge,Windows 10 周年纪念版及更高版本
- 在 Windows 10 中,DirectWrite 和 Direct2D 平台组件允许在使用那些 API 的任何应用程序中实现 OpenType-SVG 支持
已知问题
Illustrator 和 InDesign
在 Illustrator 或 InDesign 中使用 OpenType-SVG 彩色字体时,您可能会遇到以下问题:
- 在导出为 PDF 或 SVG 后,字形可能会出现在错误的位置。
- 如果在彩色 SVG 字体上应用“透视”、“旋转”或“反射”效果,则在创建字形轮廓时,效果可能会丢失或字符可能会偏离其原始位置。
- 垂直设置文本时,导出后字符位置可能会有所不同。
- 在螺旋路径位置上设置文本时,字符可能会显示为错误放置。
软件团队正在努力修复这些问题。
其他资源
下面一些链接指向有关准备和使用 OpenType-SVG 字体的其他信息源:
- OpenType-SVG 字体中的 SVG 表的详细信息和规范:
https://www.microsoft.com/typography/otspec/svg.htm - 制作 OpenType-SVG 字体的工具和示例文件:
https://github.com/adobe-type-tools/opentype-svg - https://pixelambacht.nl/chromacheck/ 是一个网页,它将告诉浏览者,浏览器支持的不同颜色字体格式,包括 OpenType-SVG。(源代码位于 https://github.com/RoelN/ChromaCheck)
- TypeDrawers 论坛上有关 OpenType-SVG 字体制备和使用的热烈讨论:http://typedrawers.com/discussion/comment/19442/