CSSFontPaletteValuesRule: свойство basePalette

Только для чтения basePalette свойство интерфейса CSSFontPaletteValuesRule указывает базовую палитру, связанную с правилом.

Строка, которая может быть одним из следующих цветовых значений:

light

Соответствует первой палитре в файле шрифта, помеченной как применимая к светлому фону, то есть близкой к белому. Если в шрифте нет палитры или если ни одна палитра не имеет необходимых метаданных, значение эквивалентно "0", то есть первой палитре в шрифте.

dark

Соответствует первой палитре в файле шрифта, помеченной как применимая к тёмному фону, то есть близкой к чёрному. Если в шрифте нет палитры или если ни одна палитра не имеет необходимых метаданных, значение эквивалентно "0", то есть первой палитре в шрифте.

строка, содержащая индекс (например, "0", "1", …)

Соответствует палитре, соответствующей индексу. Первая палитра соответствует "0".

В этом примере добавляются правила в дополнительном стиле, добавленном в документ, возвращаемом в качестве последнего стиля документа (document.styleSheets[document.styleSheets.length-1].cssRules). Таким образом, rules[2] возвращает первый объект CSSFontPaletteValuesRule, а rules[3] — второй.

HTML

<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
<pre id="log"></pre>

CSS

@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

h2 {
  font-family: "Nabla";
}

@font-palette-values --two {
  font-family: "Nabla";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Nabla";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}

JavaScript

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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const twoRule = rules[2]; // A CSSFontPaletteValuesRule interface
const fiveRule = rules[3]; // A CSSFontPaletteValuesRule interface

log.textContent = `The ${twoRule.name} @font-palette-values base palette is: ${twoRule.basePalette}\n`;
log.textContent += `The ${fiveRule.name} @font-palette-values base palette is: ${fiveRule.basePalette}`;

Результат

• @font-palette-values правило
• base-palette дескриптор