在网页上定制彩色字体
彩色字体提供了一种为您的设计增添丰富性的方式，而不会牺牲使用纯文本的诸多优点。无论彩色字体多么装饰性，底层文本始终是可搜索、可复制粘贴、可缩放、可翻译，并且与屏幕阅读器兼容的。
WebKit 现在支持 CSS @font-palette-values。通过这个 at-rule，您可以访问字体设计者提供的预定义调色板，并且可以定制它们，使彩色字体完美匹配您设计中的颜色。
很久很久以前，在一个隆冬时节，当雪花像羽毛一样从云端飘落时，一位皇后坐在她那扇乌木黑框的宫殿窗户旁，缝制着她丈夫的衬衫。当她全神贯注地看着窗外的雪时，她不小心扎破了手指，三滴血落在了雪上。血红在雪白上看起来是那么美，她心想：“啊，但愿我有一个孩子，皮肤像这雪一样白，嘴唇像这血一样红，头发像这窗框的木头一样黑！”不久之后，她果然生了一个小女儿，皮肤雪白，双颊血红，头发乌黑，因此她被命名为“白雪公主”。与此同时，她的母亲去世了。
这个回答让皇后非常愤怒，她嫉妒得脸色发黄。从那一刻起，每当她看到白雪公主，她的心就变得冰冷，她憎恨这个小女孩。她的嫉妒和妒恨与日俱增，日夜不得安宁，她对一个猎人说：“把孩子带到森林里去。我再也不想见到她了。你必须杀了她，把她的心和舌头带回来作为凭证。”猎人听从命令，带着女孩离开了，但当他拔出刀准备杀她时，她开始哭泣，说：“啊，亲爱的猎人，饶我一命吧！我会跑到野森林里去，永远不回家了。”
彩色调色板在 WebKit 中与 COLRv0 字体文件格式配合良好，我们正在研究其他格式，例如 SVG。
以上字体的背景
此演示中的字体是 Bradley 的复刻版，这是一种最初于 1895 年发布的“童话黑体字”。该字体附带了一套特殊的华丽的首字母大写，用于首字下沉（另请参阅 ::initial-letter）和其他标题用途，David 于去年十二月将其数字化，用于他的每月字体俱乐部，正好赶上假期。
每个字形都由几层不同的图层组成（字形本身、背景、华丽的线条、字母轮廓和边框）。使这些图层颜色不同但又协调一致，为设计增添了深度，使其超越了简单前景/背景所能提供的效果。这感觉就像是带有多个调色板的彩色字体的完美用例，也是一个拥有 127 年历史的字体在新兴字体技术中发挥小作用的独特机会。
CSS 中的调色板
字体可以在字体文件内部的 CPAL 表中定义一个或多个自己的颜色调色板。调色板是按顺序排列的，因此它们通过索引来识别。例如，一个字体可能定义了使用蓝色和绿色的第 3 号颜色调色板，而另一个第 5 号调色板可能使用红色和橙色。调色板内部的颜色也通过索引识别——所有调色板内部都包含相同数量的颜色。
这些颜色调色板可以使用 font-palette-values 在 CSS 中进行调整或覆盖。一个示例如下：
@font-palette-values --lilac-blossom {
font-family: "Bradley Initials DJR Web";
base-palette: 7;
override-colors: 0 #fff, 1 #F3B0EB;
}这个示例的意思是：“创建一个名为 Lilac Blossom 的调色板，当应用于 Bradley Initials DJR Web 时，它就像字体中的第 7 个调色板，但将该调色板中的颜色 #0 覆盖为白色，并将调色板中的颜色 #1 覆盖为 #F3B0EB。”如果您不想覆盖任何颜色，那也没问题——只需删除整个 override-colors 描述符即可。
然后您可以通过简单地将其提供给 font-palette 属性来应用此颜色调色板，如下所示：
font-palette: --lilac-blossom;
渐进增强
如果您使用的是旧版本的 Safari 或其他不理解 font-palette 属性的浏览器，它将渲染字体中的默认（第 0 个）颜色调色板。以下是上述示例在此类浏览器中的样子：
如果回退行为对于您的特定字体来说不理想，您可以使用 @supports 媒体查询在您的样式表中检测理解 CSS 颜色调色板的浏览器，如下所示：
@supports (font-palette: --lilac-blossom) {
.lilacblossom {
font-palette: --lilac-blossom;
}
}
@font-palette-values --lilac-blossom {
font-family: "Bradley Initials DJR Web";
base-palette: 7;
override-colors: 0 #fff, 1 #F3B0EB;
}深色模式
并非所有颜色调色板在所有背景下都清晰可见。没有彩色字体时，用于渲染文本的颜色完全由 CSS 作者决定，但现在字体可以定义其内部的颜色调色板，CSS 作者需要选择或创建一种在渲染背景上清晰可读的颜色调色板。当字体回退发生或用户阻止某些字体加载时，这可能特别棘手。
然而，像 Bradley Initials DJR Web 这样的字体有一个额外的工具来帮助解决这个问题。字体可以指示其内部的某些调色板是否适用于浅色背景或深色背景，并且这些调色板与 font-palette 属性相关联。您甚至不必使用 @font-palette-values！
因此，如果你想在深色背景上使用调色板，你只需简单地说 font-palette: dark，如下所示：
浅色背景也一样：font-palette: light
因为 font-palette 属性对非彩色字体没有影响，所以它可以安全地与 prefers-color-scheme 媒体查询结合使用，如下所示：
@media (prefers-color-scheme: dark) {
:root {
background: black;
color: white;
font-palette: dark;
}
}回退
由于 @font-palette-values 块被限定在特定字体内，您可以创建多个共享名称的块。这非常强大——这意味着您可以定义一个颜色调色板名称，并让它以不同的方式应用于与其一起渲染的任何字体。这是一个示例：
@font-palette-values --lilac-blossom {
font-family: "Bradley Initials DJR Web";
base-palette: 1;
}
@font-palette-values --lilac-blossom {
font-family: "Megabase";
base-palette: 2;
}
<div style="font-palette: --lilac-blossom;">
<div style="font-family: 'Bradley Initials DJR Web';">Pizza is amazing!</div>
<div style="font-family: 'Megabase Web';">Is there any food better than pizza?</div>
</div>这将使 Bradley Initials DJR Web 的 Lilac Blossom 调色板应用于 Bradley Initials DJR Web，并将 Megabase 的 Lilac Blossom 调色板应用于 Megabase。而您只需指定一次 font-palette 属性！
上下文颜色
除了从调色板中提取颜色外，一些彩色字体还留出特殊的形状，这些形状与当前元素的前景色相关联。这使得它们具有极大的灵活性，但也意味着这些形状独立于 font-palette 运行。在这些情况下，您可以简单地使用 color 属性来更改它们的颜色，就像使用 Megabase 的这个演示一样。
<div style="font-family: 'Megabase Web';">
<div style="color: black;">They were just pushed into space.</div>
<div style="color: blue;">As much as I care about you.</div>
</div>它们只是被推入太空。
我多么在乎你。
结论
当然，能力越大，责任越大；仅仅因为你可以改变颜色，并不意味着你总是应该这样做。调色板中的颜色通常是协调以达到美学和谐的，所以了解它们之间应该如何关联是很重要的。你可以查看字体的预定义颜色调色板，了解字体设计者如何分配调色板中每种颜色的角色，并进行相应调整。
选择与背景形成强烈对比的颜色也很重要，以保持文本可读性和网页可访问性。调色板中用于构成字母基础的颜色通常应该在背景中“突出”，而像阴影、轮廓和装饰元素等辅助层可以对比度低一些，以防止它们压倒字母形状。
彩色字体是对图形图像的极大改进，因为它们默认与屏幕阅读器、复制/粘贴和页面内查找功能兼容。此外，如果字体因某种原因未能加载，它们会优雅地显示回退文本，并且在浏览器窗口调整大小时会重新排版。不仅如此，彩色字体比图形图像更灵活，因为它们可以将使用它们的元素的前景色融入字体的设计中。
彩色字体并非旨在取代单色字体。但在适度使用、足够大的尺寸和正确的环境下，它们可以是锦上添花！