CSS @Rules

@font CSS 中的 -palette-values 规则有助于自定义由字体制作者创建的font-palette默认值。字体调色板有助于指定字体中包含的调色板。

语法

@font-palette-values = 
  @font-palette-values  <dashed-ident> { <declaration-list> }

上面语法中使用的 <dashed-ident> 是用户定义的标识符，它似乎是一个 CSS 自定义属性。它的行为有所不同，并且没有包装在 CSS var() 函数中。

示例

这是 @font-palette-values at-rule 的示例。

<html>
<head> 
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   p {
      font-family: "Bungee Spice";
      font-size: 2rem;
   }
   @font-palette-values --sample-palette {
      font-family: "Bungee Spice";
      override-colors:
      0 #111,
      1 yellow;
   }
   .sample-color {
      font-palette: --sample-palette;
   }
</style>
</head>
<body>
   <p>Default Color Palette</p>
   <p class="sample-color">@font-palette-values Color Palette</p>
</body>
</html>

在上面的示例中:

  • 已导入外部 Google 字体。

  • @ 的名称为 --sample-palette 的标识符声明了 font-palette-values。

  • 使用 font-palette 声明了名为 .sample-color 的类 --sample-palette 被传递，该类应用调色板p 元素中的文本。

描述符或相关属性

下表列出了与 @font-palette-values 相关的所有描述符:

描述符/属性说明
font-family确定调色板将应用到的字体系列的名称。
base-palette确定由字体制作者开发的基本调色板的名称或索引。
override-colors确定要覆盖的基本调色板中的颜色。