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.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>

列印頁面