CSSFontPaletteValuesRule

Baseline 已廣泛支援

此功能已成熟，可跨多種裝置和瀏覽器版本使用。自 ⁨2022 年 11 月⁩起，所有瀏覽器均支援此功能。

CSSFontPaletteValuesRule 介面代表一個 @font-palette-values at-rule。

例項屬性

繼承自其祖先 CSSRule 的屬性。

CSSFontPaletteValuesRule.name 只讀: 包含字型調色盤名稱的字串。
CSSFontPaletteValuesRule.fontFamily 只讀: 指示規則要應用的字體系列的字串。
CSSFontPaletteValuesRule.basePalette 只讀: 指示與規則關聯的基礎調色盤的字串。
CSSFontPaletteValuesRule.overrideColors 只讀: 指示被覆蓋的基礎調色盤顏色以及新顏色的字串。

此示例首先定義了一個 @import 和一個 @font-palette-values at-rule。然後它讀取 @font-palette-values 規則並顯示其名稱。MDN 的 live sample 基礎結構將示例中的所有 CSS 塊合併為一個具有 css-output ID 的內聯樣式，因此我們首先使用 document.getElementById() 來查詢該樣式表。該調色盤將是該樣式表中的第二個 CSSRule。因此，rules[1] 返回一個 CSSFontPaletteValuesRule 物件，我們可以從中訪問 fontFamily。

HTML

html

<pre id="log">The @font-palette-values at-rule font families:</pre>

CSS

css

@import "https://fonts.googleapis.com/css2?family=Bungee+Spice";

@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}

.alternate {
  font-palette: --Alternate;
}

JavaScript

const log = document.getElementById("log");

const rules = document.getElementById("css-output").sheet.cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;