CSS @font-palette-values - font-family

CSS 中@font-palette-values at-rule 的font-family 描述符有助于指定要引用或应用哪些字体系列调色板值。它实际上应该与设置 CSS font-family 时使用的值匹配。

可能的值

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

<family-name>：指定font-family 的名称。

语法

font-family = <family-name>

上述语法如下所示

@font-palette-values --sample-font {
   font-family: "Brygada1918-Italic";
}

CSS font-family - 使用匹配的 font-family 名称

以下示例演示了@font-palette-values at-rule 的font-family 描述符的使用，其中相同的 font-family 也与@font-face at-rule 一起使用。

<html>
<head> 
<style>
   @font-face {
      font-family: "RocherColorGX";
      src: url(font/RocherColorGX.woff2);
   }

   body {
      font-family: "RocherColorGX";
      font-size: 2em;
      height: 100vh;
   }

   @font-palette-values --blues {
      font-family: RocherColorGX;
      base-palette: 10;
   }
   .blues {
      font-palette: --blues;
   }
</style>
</head>
<body>
   <h1 class="blues">font-family</h1>
</body>
</html>

CSS font-family - 为多个字体系列使用相同的标识符

以下示例演示了@font-palette-values at-rule 的font-family 描述符的使用，其中相同的字体调色板标识符用于不同的元素。

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

   body {
      font-family: "RocherColorGX";
      font-size: 2em;
   }

   @font-palette-values --green {
      font-family: "RocherColorGX";
   }

   @font-palette-values --green {
      font-family: "Bungee Spice";
   }

   h2, h3 {
      font-palette: --green
   }

   h2 {
      font-family: "RocherColorGX";
   }

   h3 {
      font-family: "Bungee Spice";
   }
</style>
</head>
<body>
   <h2>h2</h2>
   <h3>h3</h3>
</body>
</html>

打印页面