CSSFontPaletteValuesRule: свойство fontFamily

Только для чтения fontFamily свойство интерфейса CSSFontPaletteValuesRule перечисляет семейства шрифтов, к которым можно применить правило. Семейства шрифтов должны быть именованными; общие семейства, такие как courier неверны.

Строка, содержащая список семейств шрифтов, разделенных пробелами, к которым можно применить правило.

В этом примере сначала определяются правила @import и @font-palette-values. Затем считывается правило @font-palette-values и отображается его имя. Поскольку эти правила находятся в последнем добавленном в документ стиле, палитра будет вторым CSSRule , возвращённым последним стилем в документе (document.styleSheets[document.styleSheets.length-1].cssRules). Таким образом, rules[1] возвращает объект CSSFontPaletteValuesRule, из которого мы можем получить доступ к fontFamily.

HTML

<pre id="log">
The @font-palette-values at-rule's applies to the font families:</pre
>

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}`;

Результат

• @font-palette-values правило
• font-family описание