CSSFontPaletteValuesRule: fontFamily-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2022 browserübergreifend verfügbar.
Die schreibgeschützte fontFamily-Eigenschaft des CSSFontPaletteValuesRule-Interfaces 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 lesen
Dieses Beispiel definiert zuerst eine @import-Regel und eine @font-palette-values-Regel mit dem At-Zeichen. Dann liest es die @font-palette-values-Regel und zeigt ihren Namen an. Die MDN-Live-Beispiel-Infrastruktur kombiniert alle CSS-Blöcke im Beispiel zu einem einzelnen Inline-Stil mit der ID css-output, daher verwenden wir zuerst document.getElementById(), um dieses Stylesheet zu finden. Die Palette wird die zweite CSSRule in diesem Stylesheet sein. Daher gibt rules[1] ein CSSFontPaletteValuesRule-Objekt zurück, aus dem wir fontFamily abrufen können.
HTML
<pre id="log">
The @font-palette-values at-rule's applies to the font families:</pre>
CSS
@import "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
const log = document.getElementById("log");
const rules = document.getElementById("css-output").sheet.cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-fontfamily |
Browser-Kompatibilität
Siehe auch
@font-palette-valuesRegel mit dem At-Zeichenfont-familyDeskriptor