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中的顏色。

列印頁面