CSSFontPaletteValuesRule: basePalette-Eigenschaft

Ein String, der einer der folgenden Farbwerte sein kann:

light

Entspricht der ersten Palette in der Schriftdatei, die als für einen hellen Hintergrund geeignet markiert ist, also nahezu weiß. Wenn es keine Palette in der Schriftart gibt oder keine Palette die erforderlichen Metadaten hat, entspricht der Wert "0", also der ersten Palette in der Schriftart.

dark

Entspricht der ersten Palette in der Schriftdatei, die als für einen dunklen Hintergrund geeignet markiert ist, also nahezu schwarz. Wenn es keine Palette in der Schriftart gibt oder keine Palette die erforderlichen Metadaten hat, entspricht der Wert "0", also der ersten Palette in der Schriftart.

ein String, der einen Index enthält (wie "0", "1", …)

Entspricht der Palette, die dem Index entspricht. Die erste Palette entspricht "0".

Dieses Beispiel fügt Regeln in ein zusätzliches Stylesheet ein, das dem Dokument hinzugefügt wird und als das letzte Stylesheet im Dokument zurückgegeben wird (document.styleSheets[document.styleSheets.length-1].cssRules). rules[2] gibt also das erste CSSFontPaletteValuesRule-Objekt zurück und rules[3] das zweite.

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

Ergebnis

• @font-palette-values at-rule
• base-palette Deskriptor