override-colors

基线 2022

新增功能

自 2022 年 11 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在较旧的设备或浏览器中无法使用。

override-colors CSS 描述符 用于覆盖彩色字体中所选 基本调色板 中的颜色。

语法

css
/* basic syntax */
override-colors: <index of color> <color>;

/* using color names */
override-colors: 0 red;

/* using hex-color */
override-colors: 0 #f00;

/* using rgb */
override-colors: 0 rgb(255 0 0);

/* overriding multiple colors */
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;

/* overriding multiple colors with readability */
override-colors:
  0 #f00,
  1 #0f0,
  2 #00f;

override-colors 描述符 采用以逗号分隔的颜色索引和新颜色值的列表。

颜色索引从零开始，可以使用任何 颜色值。

对于每个索引和颜色的键值对，指定 基本调色板 中具有该索引的颜色将被覆盖。如果彩色字体在指定索引处没有颜色，则将忽略它。

值

[ <integer [0,∞]> <absolute-color-base> ]

指定 基本调色板 中颜色的索引以及要用来覆盖它的颜色。

正式定义

相关 At规则@font-palette-values
初始值n/a（必需）
计算值如指定

正式语法

override-colors = 
  [ <integer [0,∞]> <color> ]#

示例

更改表情符号的颜色

此示例演示如何覆盖 Noto Color Emoji 彩色字体中的颜色以匹配您网站的品牌。

HTML

html
<section class="hats">
  <div class="hat">
    <h2>Original Hat</h2>
    <div class="emoji">🎩</div>
  </div>
  <div class="hat">
    <h2>Red Hat</h2>
    <div class="emoji red-hat">🎩</div>
  </div>
</section>

CSS

css
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}
@font-palette-values --red {
  font-family: "Noto Color Emoji";
  override-colors:
    0 rgb(74 11 0),
    1 rgb(149 22 1),
    2 rgb(183 27 1),
    3 rgb(193 28 1),
    4 rgb(230 34 1);
}
.red-hat {
  font-palette: --red;
}

结果

更改备用基本调色板中的颜色

使用 Rocher Color Font，此示例演示如何覆盖字体中的一种颜色。

HTML

html
<h2 class="normal-palette">Normal Palette</h2>
<h2 class="override-palette">Override Palette</h2>

CSS

css
@font-face {
  font-family: "Rocher";
  src: url("[path-to-font]/RocherColorGX.woff2") format("woff2");
}
h2 {
  font-family: "Rocher";
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
}
@font-palette-values --override-palette {
  font-family: "Rocher";
  base-palette: 3;
  override-colors: 0 rebeccapurple;
}
.normal-palette {
  font-palette: --normal-palette;
}
.override-palette {
  font-palette: --override-palette;
}

结果

此示例显示在 base-palette 3 中，索引为 0 的颜色被 rebeccapurple 覆盖。

Example showing base-palette and base-palette with 1 color overridden

规范

规范
CSS 字体模块级别 4
# override-color

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅