CSSFontPaletteValuesRule: basePalette-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨November 2022⁩.

Die schreibgeschützte basePalette-Eigenschaft der CSSFontPaletteValuesRule-Schnittstelle gibt die Basis-Palette an, die mit der Regel assoziiert ist.

Wert

Ein String, der einer der folgenden Farbwerte sein kann:

light: Entspricht der ersten Palette in der Schriftartdatei, die als geeignet für einen hellen Hintergrund markiert ist, also nahezu weiß. Wenn keine Palette in der Schriftart vorhanden ist 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 Schriftartdatei, die als geeignet für einen dunklen Hintergrund markiert ist, also nahezu schwarz. Wenn keine Palette in der Schriftart vorhanden ist 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 (z. B. "0", "1", …): Entspricht der Palette, die dem Index entspricht. Die erste Palette entspricht "0".

Die MDN-Live-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzigen Inline-Stil mit der ID css-output, daher verwenden wir zuerst document.getElementById(), um dieses Stilblatt zu finden. rules[2] gibt das erste CSSFontPaletteValuesRule-Objekt zurück und rules[3] das zweite.

HTML

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

css

@import "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.getElementById("css-output").sheet.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}`;