CSSFontPaletteValuesRule

Baseline 2022

新功能

2022 年 11 月起,此功能可在最新的设备和浏览器版本中使用。此功能可能无法在旧版设备或浏览器中使用。

实例属性

继承自其祖先 CSSRule 的属性。

CSSFontPaletteValuesRule.name 只读

包含字体调色板名称的字符串。

CSSFontPaletteValuesRule.fontFamily 只读

指示必须应用规则的字体系列的字符串。

CSSFontPaletteValuesRule.basePalette 只读

指示与规则关联的基本调色板的字符串。

CSSFontPaletteValuesRule.overrideColors 只读

指示被覆盖的基本调色板的颜色以及新颜色的字符串。

实例方法

继承自其祖先 CSSRule 的方法。

示例

使用 CSSOM 读取关联的字体系列

此示例首先定义一个 @import 和一个 @font-palette-values at 规则。然后它读取 @font-palette-values 规则并显示其名称。由于这些规则存在于添加到文档的最后一个样式表中,因此调色板将是文档中最后一个样式表(document.styleSheets[document.styleSheets.length-1].cssRules)返回的第二个 CSSRule。因此,rules[1] 返回一个 CSSFontPaletteValuesRule 对象,从中我们可以访问 fontFamily

HTML

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

CSS

css
@import url(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

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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // aA CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;

结果

规范

规范
CSS 字体模块级别 4
# om-fontpalettevalues

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅