CSSFontPaletteValuesRule: fontFamily-Eigenschaft

Baseline 2022

Newly available

Since November 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

BCD tables only load in the browser

Siehe auch