Css彩色字体 - font-palette属性

为何要使用彩色字体

若是大家设计师想在某些特别的专题活动中使用下图的字体做为标题字体进行展示，怎么办呢？作成图片咯。而后你可能会遇到这几个问题：不一样屏幕下的适配，要是只作一种尺寸的图，放大或缩小后的效果都不太好。直接作成 SVG？好像不能复制到 Word 里面加粗啊，也就是说，这种作法使得这些“文字”自己失去了真实文字该有的能力。

前端此时彩色字体的好处就显现出来了。既能达到视觉效果上的要求，还拥有常规文字的功能，可以复制，可以粘贴，还能够被屏幕阅读器阅读，丝绝不妨碍常规操做。

什么是彩色字体（Color Font）

日常使用中最常见的彩色字体要数 Emoji 表情了。例如在 Windows 10 上，Segoe UI Emoji 就属于一款彩色字体。

通常彩色字体还会包含少量兼容信息，这些兼容信息包含 Unicode 编码的单色字形数据，使得在少量不支持彩色字体的平台上，依然能够像渲染普通字体一样将彩色字体的字形渲染出来，达到一种向后兼容的效果。

彩色字体的实现标准

在最新的OpenType 标准中 ，就有多达四种彩色字体数据的形容格式。

SVG，由 Adobe 和 Mozilla 主导的矢量字体标准。其中不仅包含了标准的 TrueType 或者 CFF 字形信息，还包含了可选的 SVG 数据，允许为字体定义颜色、渐变甚至是动画效果。SVG 标准中的配色信息也将存储在 CPAL 中。

COLR + CPAL，由微软主导的矢量字体标准。其中包含 COLR 即 字形图层数据 和 CPAL 配色信息表 ，对其的支持集成在 Windows 8.1 及之后的版本中。

CBDT + CBLC，由 Google 主导的位图字体标准。其中包含了 CBDT 彩色外形位图数据 和 CBLC 位图定位数据，对其的支持集成在 Android 中。

SBIX，由 Apple 主导的位图字体标准。SBIX 即 标准位图图像表 其中包含了 PNG、JPEG 或者 TIFF 的图片信息，对其的支持集成在 macOS 和 iOS 中。

浏览器对各种标准的支持

不过在2016 年的时候，各大厂商最终同意使用 OpenType SVG 作为彩色字体的标准，也就是上面提到的 SVG， 也是 W3C 目前所用的标准 。相信在不久各大厂家浏览器将逐渐支持 W3C 所用的 SVG 标准。以下内容来源于作者张鑫旭：超酷！CSS font-palette与彩色字体显示

font-palette 与字体颜色

好，关于彩色字体的基础知识介绍完了，下面可以讲讲本文的重点，也就是彩色字体的这个“彩色”的颜色控制了。

在过去，无论是普通字体还是彩色字体，如果想要表现出不一样的颜色或者纹理，往往需要使用mask 遮罩，或者 background-clip:text 方法 进行模拟，或者使用 filter 滤镜或者 mix-blend-mode 混合模式进行变色。但是这些方法都属于曲线救国，往往会丢失很多细节，效果并不如人意。

而 font-palette 属性专门用来改变彩色字体中的字形颜色的，配合 @font-palette-values 规则，可以让 css 对字符色彩的控制达到一个全新的高度。

以现在浏览器更新换代的速度，不出一年，其实就可以在生产环境使用对应的技术了。况且，此特性属于渐进增强的特性，就算浏览器不支持，也不影响初始的能力，因此，学起来，不要犹豫。

如何设置字体的调色？

彩色字体中有个调色板的概念，是字体在制作的时候定义了一系列的颜色组合。

font-palette 属性的作用就是调用其中指定的调色板。

因此，使用过程大致可以分为以下这三块：

1. 自定义字体；
2. 自定义字体中的调色板；
3. 调用调色板。

1. 自定义字体

自定义字体使用 @font-face 规则，这里，我们使用一个名为 Rocher Color 的多彩字体进行示意，假设此字体文件名是 RocherColorGX.woff2。

则我们可以定义一个名为 'Rocher' 的自定义字体，这个字体使用的就是多色字体文件。

@font-face {
    font-family: 'Rocher';
    src: url(./RocherColorGX.woff2);
}

2. 自定义调色板

2. 至于字体中的调色板定义，这个需要借助 @font-palette-values 规则，大家可以看下下面的 CSS 代码：

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

表示定义了一个名为 –Zhangxinxu 的调色板，这个调色板使用的是第9号基础色板。

所谓的“基础色板”，指的是字体制作时候内置的一系列调色板，使用 CSS base-palette 属性进行调用。

现在问题来了，我如何知道字体中有哪些色板呢？ base-palette 属性后面的序号又是什么意思呢？

3. 调色板的获取和规则

有个名叫 Wakamai Fondue 的在线网站工具可以帮助识别字体中的颜色色板。

点击页面中间的圈圈就可以上传字体进行识别了：

此工具很强，不仅可以识别色板，字体特征（连字、字距、上下错落等），可变特性（内轮廓、外阴影、轮廓等）等都可以识别，大家可以收藏备忘下。

例如，这里可以识别 RocherColorGX.woff2 字体共有 11 个 4 色调色板，其中，第一个色板是默认的配色（浏览器不支持 font-palette 属性显示的颜色），序号是 0，然后往下依次是 1-9.

也就是 base-palette:0 表示使用的是默认色板， base-palette:1 使用的是第2个色板，依次类推。

4. 调用调色板

有了自定义的调色板，我们就可以使用 font-palette 属性调用了，例如：

.text {
    font-palette: --Zhangxinxu;
}

此时 .text 选择器对应的元素中的字符就会调用调色板序号为 9 的色值显示，是有点灰灰的颜色效果，如下截图所示：

5. 完整代码与效果

将上面的代码整合一下，就有了完整的多彩字体颜色设置的实现了。

假设有如下的 html 元素：

<h4 class="grays">Color fonts</h4>
<h4 class="purples">Color fonts</h4>
<h4 class="mint">Color fonts</h4>

则下面的 CSS 可以让这三段文字分别显示不同的色板色值：

/* 自定义字体 */
@font-face {
  font-family: 'Rocher';
  src: url(./RocherColorGX.woff2);
}
h4 {
  font-family: 'Rocher';
  font-size: 50px;
}
/* 自定义调色板 */
@font-palette-values --Grays {
  font-family: Rocher;
  base-palette: 9;
}
@font-palette-values --Purples {
  font-family: Rocher;
  base-palette: 6;
}
@font-palette-values --Mint {
  font-family: Rocher;
  base-palette: 7;
}
/* 调用调色板 */
.grays {
  font-palette: --Grays;
}
.purples {
  font-palette: --Purples;
}
.mint {
  font-palette: --Mint;
}

最终的渲染效果如下图所示（如果浏览器支持 font-palette 属性）：

眼见为实，您可以狠狠地点击这里： @font-palette-values使用演示demo

如果您的浏览器版本还不足，则显示的效果会是默认的色板颜色，也就是棕黄色色板的效果。

override-colors 重置调色板颜色

除了使用默认的调色板色值，我们还可以使用 CSS override-colors 属性重置调色板中的颜色。

override-colors 属性同样只在 @font-palette-values 规则中使用才有效。

语法如下：

override-colors:
    0 <color>,
    1 <color>,
    2 <color>,
    ...;

至于颜色的数量的多少是有字体决定的，例如 Rocher Color 这个字体的每个色板是 4 个颜色，则这里的 override-colors 就可以重置 4 个颜色值。

但是，具体哪个序号对于那块的色值是无法判断的，需要自己代码调试才知道。

我们来看一个使用案例，单独使用 override-colors 属性，则表示在默认的调色板上重置某些颜色值。

@font-palette-values --Default {
  font-family: Rocher;
  override-colors:
    0 #2a80eb,
    1 #eb4646,
    2 #f59b00,
    3 #1cad70;
}

.default {
  font-palette: --Default;
}

意思是自定义一个名为 –Default 的调色板，里面的颜色将默认调色板的 4 个颜色全部覆盖了个遍。

此时设置了类名 default 的元素的英文字符渲染效果如下图所示：

如果我们只希望重置某个调色板中的具体的一两个色值，而不是全部，则此时可以和 base-palette 属性一起使用。

@font-palette-values --Palette6 {
  font-family: Rocher;
  base-palette: 6;
  override-colors: 2 #f59b00;
}

此时调色板 –Palette6 中只有一个颜色覆盖成了橙色，截图效果见下面：

上述效果有对应的演示页面，您可以狠狠地点击这里： override-colors覆盖文字调色板颜色demo

其他有趣的展示

这里还有个演示页面，利用 override-colors 属性自定义 emoji 表情各个部位的颜色，原始地址是 这里 ，如果无法访问了，也可以点击这里体验效果。

当改变了几个颜色值后，此时相关的 CSS 代码如下截图所示：

其他说明、结语等

对于中文环境，受制于字体文件过大，以及缺少对应的字体，因此，多色字体技术的实际应用不是中文的处理，更多的是英文数字，或者是某些彩色的矢量图标。

虽然目前也有彩色 icon 图标，但一般都是 SVG 绘制的，颜色的控制并不方便。

如果将其转换成彩色字体，再配合 font-palette 属性进行控制，那就方便多了。

不知道有没有自动转换的工具，理论上应该是可以支持的，不过我没找到，如果已经有了，欢迎大家进行反馈，我更新到文章中。

越来越期待以后的 Web 产品样式与形态了。

链接: https://www.fly63.com/article/detial/11928