CSS - @font-palette-values

CSS 中的@font-palette-values规则有助于自定义由字体制作商创建的font-palette默认值。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>

在上面的例子中

已经导入了外部谷歌字体。
声明了一个名为--sample-palette的@font-palette-values标识符。
声明了一个名为.sample-color的类，并传递了font-palette --sample-palette，这将颜色调色板应用于p元素中的文本。

描述符或相关属性

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

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

打印页面