The CSSFontFeatureValuesRule interface represents an @font-feature-values at-rule, letting developers assign for each font face a common name to specify features indices to be used in font-variant-alternates.
The CSSFontFeatureValuesRule interface represents an @font-feature-values at-rule, letting developers assign for each font face a common name to specify features indices to be used in font-variant-alternates.
Inherits properties from its ancestor CSSRule.
CSSFontFeatureValuesRule.fontFamilyA string that identifies the font family this rule applies to.
Inherits methods from its ancestor CSSRule.
In this example, we declare two @font-feature-values one for the Font One font family, and the other for Font Two. We then use the CSSOM to read these font families, displaying them into the log.
html
<pre id="log"></pre>
css
/* At-rule for "nice-style" in Font One */ @font-feature-values Font One { @styleset { nice-style: 12; } } /* At-rule for "nice-style" in Font Two */ @font-feature-values Font Two { @styleset { nice-style: 4; } } /* Apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); }
js
const log = document.getElementById("log"); const rules = document.styleSheets[document.styleSheets.length - 1].cssRules; const fontOne = rules[0]; // A CSSFontFeatureValuesRule log.textContent = `The 1st '@font-feature-values' family: "${fontOne.fontFamily}".\n`; const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}".`;
| Specification | 
|---|
| CSS Fonts Module Level 4  # cssfontfeaturevaluesrule  | 
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
CSSFontFeatureValuesRule | 
111 | 111 | 34 | No | 97 | 16.2 | 111 | 111 | 34 | No | 16.2 | 22.0 | 
annotation | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
characterVariant | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
fontFamily | 
111 | 111 | 34 | No | 97 | 16.2 | 111 | 111 | 34 | No | 16.2 | 22.0 | 
ornaments | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
styleset | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
stylistic | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
swash | 
111 | 111 | No | No | 97 | No | 111 | 111 | No | No | No | 22.0 | 
    © 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/CSSFontFeatureValuesRule