COLRv1 和 CSS font-palette：网络排版变得多彩

据街机游戏排版作者 Toshi Omagari 说，世界上第一个 多色数字字体 是 1982 年为一款名为 Insector 的从未发布的视频游戏而创建的。多色字体，有时也称为 彩色字体，在网络上仍然比较少见，尽管 COLR 字体格式 自 2018 年以来一直拥有全面的跨浏览器支持（即使在 Internet Explorer 中也是如此！）。

这项技术开辟了全新的排版创意。虽然我所见过的某些彩色字体充其量只能算是艳丽，但彩色字体却很有趣、新颖且引人注目。随着新的 CSS 功能（包括用于控制彩色字体颜色调色板的 font-palette 属性和 @font-palette-values 规则）的添加以及 COLR 字体格式的演变，现在是深入研究并尝试现代网络排版功能的好时机。

COLR 支持

我上次 写关于彩色字体 的时间是 2018 年。当时，有 四种不同的多色字体的标准：OpenType-SVG、COLR、SBIX 和 CBDT/CBLC。您可以使用 ChromaCheck 查看您自己的浏览器支持哪些彩色字体格式。

Google Chrome 已 将 OpenType-SVG 标记为“wontfix”，这意味着 Chrome 或 Edge 将永远不支持该格式。SBIX 和 CBDT/CBLC 大多可以忽略，因为它们都是基于栅格图像，并且在更大的字体大小下会变得模糊。基于位图的字体的大文件大小也使其不适合网络使用。

Ulrike Rausch 是 LiebeHeide 的创作者，这是一种位图彩色字体，它不可思议地复制了圆珠笔的外观。“我最大的目标始终是尽可能真实地再现手写文字，”她告诉我。“对于 LiebeHeide，我终于能够用字体模拟这些手工属性。缺点？字体文件中所有 PNG 图像加起来，导致 OTF 文件大小非常大。这对于桌面应用程序（如 Adobe InDesign）来说可能不是问题，但对于网络使用来说，这种字体几乎不适用。”

所有浏览器都支持 COLR 字体（现在通常称为 COLRv0）。Chrome（和 Edge）的 98 版本于 2 月发布，增加了对 COLRv1 的支持，这是该格式的演变。

COLRv0 和 COLRv1

COLRv1 是 OpenType 1.9 标准 的一部分。虽然最初的 COLRv0 缺乏 OpenType-SVG 的许多创意可能性，但 COLRv1 匹配了这些可能性，同时避免了某些缺点。例如，COLRv0 只能使用纯色，而 COLRv1 可以使用 线性、径向， 和圆锥形渐变。该格式还添加了 合成和混合，并允许重复使用形状以节省文件大小。

排版专家 Roel Nieskins 解释道：“我以前说 OpenType-SVG 格式是最好的格式，因为它提供了最大的通用性——直到我意识到这对于文本渲染这样的低级任务来说太复杂了。它在字体渲染级别实现了 SVG 的基本子集。但它与其他字体技术（提示、可变轴等）配合得不好，而且实现起来很痛苦。因此，我转而支持 COLR。COLR 基本上重用了 OpenType 字体已经拥有的所有内容。它‘只’添加了分层，以及更改每一层颜色的可能性。简单但有效。”

COLRv1 与可变字体轴完全兼容，并且已经有了一些可变 COLR 字体的示例，例如 Merit Badge、Plakato Color 和 Rocher Color。

以下是由 Ulrike Rausch 提供的一个引人注目的示例，展示了该格式的可能性，这是一种（目前尚未发布的）字体，它以数字方式重新创建了霓虹灯的视觉效果

字体公司 Underware 的 Akiem Helmling 对 COLRv1 非常着迷，他告诉我：“COLRv1 格式可能会对字体设计产生与可变字体近年来对字体设计产生的类似（甚至更大）的影响。”对 Akiem 来说，这无疑是更好的格式。“所有以前的彩色格式都是对字形添加颜色的糟糕技巧。虽然 OpenType-SVG 被某些人认为是一个很好的解决方案，但在我看来，它根本不是。从务实的角度来看，SVG 是 OpenType 开放结构中的一个‘封闭房间’。无法重用或链接数据，也无法在其他字体表和 SVG 表之间建立连接。正因为如此，我们无法创建具有可变 SVG 数据的可变字体。”

这对于该格式来说还处于早期阶段。Mozilla 尚未发布 COLRv1，但已对该格式采取了 积极立场，表示它“有可能在网络使用中取代 OpenType-SVG 字体”。Apple 不愿在 Safari 中实现它。

COLRv1 字体仍然会显示在这些浏览器中并可读，但所有字母都将是单一的纯色（您可以使用 CSS color 属性设置，就像使用普通字体一样）。我们还没有看到很多字体公司发布 COLRv1 字体，一些流行的设计工具（如 Figma）甚至不支持 COLRv0，但我充满希望，相信它将成为网络彩色排版的未来。在 COLRv1 存在的短短时间内，已经出现了一些展示该技术能力的精美示例，例如 Reem Kufi 和 Bradley Initials。

COLR 和 CSS

如果您使用的是彩色字体，您可能希望能够控制其颜色。到目前为止，使用 CSS 无法做到这一点。 font-palette 属性带来了覆盖字体的默认颜色方案并应用您自己的颜色方案的能力。此属性适用于 COLRv0 和 COLRv1 字体。（Apple 的 Myles Maxfield 解释说，SVG 字体可以选择使用调色板，而 COLR 字体的所有颜色都会自动被 CSS 覆盖。）

设计出一个像样的颜色调色板是一门艺术。一些字体设计师已经为我们做了这些辛苦的工作，并在字体中包含了备用调色板。您可以使用 CSS 中的 base-palette 从这些不同的颜色方案中进行选择。

如何知道字体是否提供备用调色板？字体网站可能会告诉您。如果没有，有一个方便的工具叫做 Wakamai Fondue，它会列出所有可用的颜色方案（如以下图像所示）。在这个例子中，我将使用 Rocher Color，这是一种来自 Henrique Beier 的免费可变彩色字体，具有史前时代的感觉。从 Wakamai Foundue 可以看出，这种字体使用了四种颜色，并提供了 11 种不同的调色板选项。

使用 base-palette: 0 将选择默认颜色调色板（对于 Rocher 来说，那是橙色和棕色）。

使用 base-palette: 1 将选择字体创建者定义的第一个备用调色板，依此类推。在以下代码示例中，我选择了一种不同灰色的颜色调色板

 @font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}

选择好调色板后，使用 CSS @font-palette-values 规则，您可以使用 font-palette 属性应用它

.grays {
  font-family: 'Rocher';
  font-palette: --Grays;
}

当然，您可能想要创建自己的调色板来匹配您的品牌颜色或满足您自己的设计品味。如果您要覆盖所有颜色，则无需指定 base-palette。

让我们以来自先锋字体设计师 David Jonathan Ross 的 Bungee 为例。它默认只使用两种颜色，红色和白色。在以下示例中，我将覆盖字体的两种颜色，因此 base-palette 不重要，已省略

 @font-palette-values --PinkAndGray {
  font-family: bungee;
  override-colors:
    0 #c1cbed,
    1 #ff3a92;
}

@font-palette-values --GrayAndPink {
  font-family: bungee;
  override-colors:
    0 #ff3a92,
    1 #c1cbed;
}

或者，您可以将 base-palette 作为起点，并有选择地更改一些颜色。下面我使用 Rocher 的灰色调色板，但将一种颜色覆盖为薄荷绿

@font-palette-values --GraysRemix {
  font-family: Rocher;
  base-palette: 9;
  override-colors: 
    2 rgb(90,290,210);
}

body {
  font-family: "Rocher";
  font-palette: --GraysRemix;
}

在指定 override-colors 时，很难知道字体的哪一部分将被哪个数字覆盖——您必须尝试和试验，并通过反复试验来获得所需的效果。

如果您愿意，甚至可以更改表情符号字体的颜色，例如 Twemoji（如下所示）或 Noto。这是一个来自 Google 字体工程师的 有趣演示。

当前限制

至少目前而言，一个令人遗憾的限制是 CSS 自定义属性在 @font-palette-values 中不起作用。这意味着以下代码无效

@font-palette-values --PinkAndBlue {
  font-family: bungee;
  override-colors:
    0 var(--pink),
    1 var(--blue);
}

另一个限制：从一个 font-palette 到另一个 font-palette 的动画和过渡不会插值——这意味着您可以立即从一个调色板切换到另一个调色板，但不能在它们之间逐步进行动画。我梦寐以求的令人眼花缭乱的动画表情符号字体，很遗憾无法实现。

浏览器支持

font-palette 和 @font-palette-values 从 Safari 15.4 版本开始支持，并在 Chrome 和 Edge 101 版本发布时上线。

用例

您可能已经能够想象如何在自己的项目中使用彩色字体。不过，有一些具体的用例值得一提。

COLR 和图标字体

图标字体可能不再是 Web 上显示图标的最流行方法 (Chris 解释了原因)，但它们仍然被广泛使用。如果您使用具有多种颜色的图标字体，例如 FontAwesome 中的 Duotone 或 Material Design 中的双色调图标，font-palette 可以提供一种更轻松的自定义方法。

解决表情符号问题

Nolan Lawson 最近写了一篇关于 在 Web 上使用表情符号的问题的文章。 Chrome 开发者博客 解释了当前的一种相当复杂的解决方案

如果您支持用户生成的内容，您的用户可能使用表情符号。如今，扫描文本并将遇到的任何表情符号替换为图像非常普遍，以确保跨平台渲染一致性，并能够支持比操作系统支持的更新的表情符号。然后，这些图像必须在剪贴板操作期间切换回文本。

如果它获得更多浏览器的支持，COLRv1 表情符号字体将提供一种更简单的方法。COLRv1 还具有在任何大小下都显得清晰的优点，而原生浏览器表情符号在较大的字体大小下会变得模糊和像素化。

总结

在彩色字体出现之前，Web 上的排版创意仅限于使用 CSS 应用描边或渐变填充。您始终可以使用矢量图像来实现更自定义的效果，但这并不是真正的文本——用户无法选择和复制到剪贴板，无法使用 Command+F 在页面上进行搜索，无法被屏幕阅读器或搜索引擎读取，并且您需要打开 Adobe Illustrator 才能编辑副本。

彩色字体有可能真正抓住用户的注意力，使其成为登陆页面和横幅的完美选择。它们可能不是您经常使用的工具，但它们为 Web 设计带来了新的表现力和创造力，可以使您的网站脱颖而出。