CSSFontPaletteValuesRule: fontFamily-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 fontFamily-Eigenschaft der CSSFontPaletteValuesRule Schnittstelle listet die Schriftfamilien auf, auf die die Regel angewendet werden kann. Die Schriftfamilien müssen benannte Familien sein; generische Familien wie courier sind nicht gültig.

Wert

Ein String, der eine durch Leerzeichen getrennte Liste der Schriftfamilien enthält, auf die die Regel angewendet werden kann.

Beispiele

Die zugehörige Schriftfamilie auslesen

Dieses Beispiel definiert zuerst eine @import- und eine @font-palette-values-At-Regel. Dann liest es die @font-palette-values-Regel aus und zeigt ihren Namen an. Da diese Regeln im zuletzt hinzugefügten Stylesheet des Dokuments existieren, wird die Palette die zweite CSSRule sein, die vom letzten Stylesheet im Dokument zurückgegeben wird (document.styleSheets[document.styleSheets.length-1].cssRules). rules[1] liefert also ein CSSFontPaletteValuesRule-Objekt, von dem aus wir auf fontFamily zugreifen können.

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# dom-cssfontpalettevaluesrule-fontfamily

Browser-Kompatibilität

Siehe auch