CSSFontPaletteValuesRule: fontFamily 属性

基线 2022

新功能

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

fontFamily 是 CSSFontPaletteValuesRule 接口的只读属性，它列出了可以应用此规则的字体系列。字体系列必须是 *命名* 系列；*通用* 系列（如 courier）无效。

此示例首先定义了一个 @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's applies to the 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

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

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

结果

规范

规范
CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-fontfamily

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

@font-palette-values at-规则
font-family 描述符