CSSFontFeatureValuesRule
Baseline 2023 *Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
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
.
Instance properties
Inherits properties from its ancestor CSSRule
.
CSSFontFeatureValuesRule.fontFamily
-
A string that identifies the font family this rule applies to.
Instance methods
Inherits methods from its ancestor CSSRule
.
Examples
Read font family
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);
}
JavaScript
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}".`;
Specifications
Specification |
---|
CSS Fonts Module Level 4 # cssfontfeaturevaluesrule |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSFontFeatureValuesRule | ||||||||||||
annotation | ||||||||||||
characterVariant | ||||||||||||
fontFamily | ||||||||||||
ornaments | ||||||||||||
styleset | ||||||||||||
stylistic | ||||||||||||
swash |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.