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.com/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>

列印頁面