CSS @font-palette-values - 基礎調色盤

CSS 中 @font-palette-values at-rule 的 base-palette 描述符有助於指定預定義調色盤的名稱或索引，可用於建立新的調色盤。如果指定的 base-palette 不存在，則將應用索引 0 處定義的調色盤。

使用字體制造商建立的調色盤的從零開始的索引，指定 base-palette 描述符。

可能的值

CSS 中 @font-palette-values at-rule 的 base-palette 描述符包含以下值

<index>：要使用的預定義調色盤的索引。

語法

base-palette = light | dark | <integer>

以上語法如下所示

@font-palette-values --sample {
    base-palette: 1;
}

CSS base-palette - 不同的調色盤值

以下示例演示了 @font-palette-values at-rule 的 base-palette 描述符的使用，其中相同的字體系列也與 @font-face at-rule 一起使用。

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-face {
      font-family: "RocherColorGX";
      src: url(RocherColorGX.ttf);
   }

   body {
      font-family: "RocherColorGX";
   }

   @font-palette-values --blues {
      font-family: "RocherColorGX";
      base-palette: 7;
   }
   
   @font-palette-values --yellow {
      font-family: "RocherColorGX";
      base-palette: 5;
   }

   .seven {
      font-palette: --blues;
   }

   .five {
      font-palette: --yellow;
   }
</style>
</head>
<body>
   <h1 class="seven">base-palette: 7</h1>
   <h1 class="five">base-palette: 5</h1>
   <h1>default base-palette</h1>
</body>
</html>

列印頁面