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.ac.cn/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}`;