CSS font-palette 怎样切换彩色字体的内置配色

彩色字体不是把普通文字的 color 换成另一种颜色那么简单。它可能在一个字形里携带多层颜色，CSS 需要用 font-palette 选择字体作者预置的配色；如果要做品牌色或深色主题，再用 @font-palette-values 声明可复用的调色板。实际项目里，先确认字体包含多套配色，再决定使用内置值还是自定义值。

理解 font-palette 与 color 的边界

font-palette 只对包含彩色字形信息的字体有意义，例如同一个 emoji 或装饰字体字形内部已经记录了多种颜色。它可以取 normal、light、dark，也可以取由 @font-palette-values 创建的自定义标识。相反，color 是普通文本的前景色；当彩色字体的调色板已经为字形提供颜色时，不能指望给元素加 color 就覆盖它。

因此排查“改了 color 但字还是原色”时，先看字体是否为彩色字体，再看是否设置了 font-palette。不要把字体下载、字体许可和浏览器支持混成一个问题，它们分别决定资源能否使用、能否分发，以及调色板能否生效。

用内置配色切换亮暗主题

如果字体作者已经标记了适合浅色或深色背景的配色，优先使用内置值，维护成本最低。下面的写法把主题选择交给媒体查询，未命中深色主题时仍保留 normal：

.color-glyph {
  /* 先声明普通字体和常规颜色，确保不支持彩色字体时仍可读 */
  font-family: "Noto Color Emoji", sans-serif;
  color: #24324a;
  font-palette: normal;
}

@media (prefers-color-scheme: dark) {
  .color-glyph {
    /* dark 表示选择字体内部标记为深色背景适用的配色 */
    font-palette: dark;
    color: #f4f7fb;
  }
}

这里的 color 仍然值得保留，因为字体回退到普通字体时它就是可见颜色。light 和 dark 不是对所有颜色强行反相，而是优先寻找字体元数据中对应的配色；若字体没有这类标记，浏览器会按规范回退到默认配色。

用 @font-palette-values 定义可复用配色

需要把多个组件统一到同一套品牌色时，可以给具体字体定义命名调色板，再在组件上引用。命名空间看起来像 CSS 自定义属性，但它不是 var() 变量：

@font-palette-values --brand-ink {
  /* 该调色板只绑定到指定彩色字体，避免误用于普通字体 */
  font-family: "Noto Color Emoji";
  /* base-palette 选择字体作者提供的基础配色索引 */
  base-palette: 1;
}

.brand-glyph {
  /* 通过命名调色板统一组件中的彩色字形 */
  font-family: "Noto Color Emoji", sans-serif;
  font-palette: --brand-ink;
}

base-palette 只能选择字体实际提供的配色索引；它不是任意的 RGB 方案。若要覆盖更多单个颜色，需结合该字体支持的 override-colors 描述符，并先确认字体格式与浏览器支持。没有必要为了一个普通单色标题引入彩色字体，普通 color 更简单。

兼容性与降级清单

生产环境还要把彩色字体当作可选增强：字体加载失败时，文字仍应表达同样的信息；自定义调色板失效时，不要让图标变成低对比度的空白块。对 emoji 一类系统字体尤其要接受平台差异，同一个字形的具体颜色不一定跨系统完全一致。

常见问题

font-palette 能覆盖普通字体的 color 吗？

不能。它选择彩色字体的内部配色；普通字体应继续使用 color、font-weight 等常规属性。

为什么设置了 dark 仍然看起来没有变化？

常见原因是字体没有标记 dark 配色，或者当前元素实际回退到了不含彩色字形信息的字体。先确认字体资源和字体回退顺序。

可以用 font-palette 做任意品牌渐变吗？

不能把它当渐变绘图工具。它依赖字体内置或规范允许的调色板定义，复杂渐变应交给 SVG、背景图或其他明确的图形方案。