CSSFontPaletteValuesRule: basePalette-Eigenschaft

Ein String, der einer der folgenden Farbwerte sein kann:

light

Entspricht der ersten Palette in der Schriftdatei, die als anwendbar auf einen hellen Hintergrund gekennzeichnet ist, das heißt, nahezu weiß. Wenn es keine Palette in der Schrift gibt oder wenn keine Palette die erforderlichen Metadaten hat, ist der Wert gleichwertig mit "0", das heißt, die erste Palette in der Schrift.

dark

Entspricht der ersten Palette in der Schriftdatei, die als anwendbar auf einen dunklen Hintergrund gekennzeichnet ist, das heißt, nahezu schwarz. Wenn es keine Palette in der Schrift gibt oder wenn keine Palette die erforderlichen Metadaten hat, ist der Wert gleichwertig mit "0", das heißt, die erste Palette in der Schrift.

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ätzlich zum Dokument hinzugefügtes Stylesheet ein, das als letztes Stylesheet im Dokument zurückgegeben wird (document.styleSheets[document.styleSheets.length-1].cssRules). So gibt rules[2] 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", fantasy;
}

@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-Regel
• base-palette Deskriptor