CSS @font-palette-values - override-colors

CSS 中 **@font-palette-values** 规则的 **override-colors** 描述符有助于覆盖彩色字体中所选调色板的颜色。

**@font-palette-values** 规则的 **override-colors** 描述符接受颜色索引和新颜色值的逗号分隔列表。
可以使用任何颜色值，例如 **颜色名称、十六进制值、rgb()** 等来指定颜色值。
颜色索引是从零开始的索引。
在索引值和颜色的每一对中，基本调色板中具有该索引的颜色将被提到的颜色值覆盖。
当彩色字体在指定的索引处没有任何颜色时，它将被忽略。

可能的值

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.ac.cn/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>

打印页面