CSSFontPaletteValuesRule: fontFamily 属性

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本使用。自 ⁨2022 年 11 月⁩起，所有浏览器均支持此功能。

CSSFontPaletteValuesRule 接口的只读 fontFamily 属性列出了该规则可以应用的字体族。字体族必须是命名的字体族；像 courier 这样的通用字体族无效。

此示例首先定义了一个 @import 和一个 @font-palette-values 规则。然后它读取 @font-palette-values 规则并显示其名称。MDN 的实时示例基础设施会将示例中的所有 CSS 块合并到一个具有 css-output ID 的内联样式中，因此我们首先使用 document.getElementById() 来查找该样式表。调色板将是该样式表中的第二个 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 "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]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;