The read-only fontFamily
property of the CSSFontPaletteValuesRule
interface lists the font families the rule can be applied to. The font families must be named families; generic families like courier
are not valid.
The read-only fontFamily
property of the CSSFontPaletteValuesRule
interface lists the font families the rule can be applied to. The font families must be named families; generic families like courier
are not valid.
A string containing a space-separated list of the font families on which the rule can be applied
This example first defines an @import
and an @font-palette-values
at-rule. Then it reads the @font-palette-values
rule and displays its name. As these rules live in the last stylesheet added to the document, the palette will be the second CSSRule
returned by the last stylesheet in the document (document.styleSheets[document.styleSheets.length-1].cssRules
). So, rules[1]
returns a CSSFontPaletteValuesRule
object, from which we can access fontFamily
.
html
<pre id="log"> The @font-palette-values at-rule's applies to the font families:</pre >
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; }
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}`;
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
fontFamily |
101 | 101 | 107 | No | 87 | 15.4 | 101 | 101 | 107 | 70 | 15.4 | 19.0 |
@font-palette-values
at-rulefont-family
descriptor
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSFontPaletteValuesRule/fontFamily