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

打印页面