CSS @font-palette-values 规则的描述符 override-colors 有助于覆盖颜色字体的选定调色板的颜色。
- @font-palette-values 规则的描述符 override-colors 接受以逗号分隔的颜色索引列表和新的颜色值。
- 任何颜色值（如 color-name、hex value、rgb（） 等）都可用于指定颜色值。
- 颜色索引是从零开始的索引。
- 在每对索引值和颜色中，具有基本调色板索引的颜色将被上述颜色值覆盖。
- 当 color 字体在指定索引处没有任何颜色时，它将被忽略。
可能的值
CSS 中 @font-palette-values 规则的描述符 override-colors 包含以下值：
- [ <integer [0，∞]> <absolute-color-base> ]：定义颜色在基本调色板中的索引以及覆盖该颜色的颜色值。
语法
override-colors = [ <integer [0,∞]> <absolute-color-base> ]#
CSS override-colors - 覆盖索引颜色
以下示例演示了 @font-palette-values 规则的描述符 override-colors 使用，其中使用基本调色板的相同颜色索引，并被不同的颜色值覆盖。
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
@font-face {
font-family: "RocherColorGX";
src: url(font/RocherColorGX.ttf);
}
body {
font-family: "RocherColorGX";
}
@font-palette-values --normal {
font-family: "RocherColorGX";
base-palette: 1;
}
@font-palette-values --override {
font-family: "RocherColorGX";
base-palette: 1;
override-colors: 0 blue;
}
@font-palette-values --override-rgb {
font-family: "RocherColorGX";
base-palette: 1;
override-colors: 0 rgb(255,0,0);
}
@font-palette-values --override-hex {
font-family: "RocherColorGX";
base-palette: 1;
override-colors: 0 #00ff00;
}
.normal {
font-palette: --normal;
}
.override-colorname {
font-palette: --override;
}
.override-rgb {
font-palette: --override-rgb;
}
.override-hex {
font-palette: --override-hex;
}
</style>
</head>
<body>
<h1 class="normal">normal base-palette</h1>
<h1 class="override-colorname">override with colorname</h1>
<h1 class="override-rgb">override with rgb</h1>
<h1 class="override-hex">override with hex</h1>
</body>
</html>
