The @font-feature-values at-rule sets a named value for certain font feature of a font family.
It can be used at the top level of CSS or in a CSS conditional-group at-rule.
The @font-feature-values at-rule can contain any of the following feature values:
- @annotation
- @ornaments
- @stylistic
- @styleset
- @character-variant
Besides a character’s default glyph there can also be other alternate glyphs (e.g., swash glyphs, stylistic alternates) for a font. A font can have several glyphs in these alternates each of which has an index. You can create a name for the index with the font-feature-values at-rule and thus it can be used with font-variant-alternate.
Initial Value | swash |
Applies to | All elements. |
Inherited | Yes. |
Animatable | No. |
Version | CSS3 |
DOM Syntax | object.style.fontFeatureValues = "swash"; |
Syntax
@font-feature-values: @swash | @annotation | @ornaments | @stylistic | @styleset | @character-variant;
Example of the @font-feature-values at-rule:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>@Font-feature-values property example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>
Values
Value | Description |
---|---|
@swash | Specifies a feature name that works with the swash() functional notation of font-variant-alternates. Only one value is allowed. |
@annotation | Specifies a feature name that works with the annotation() functional notation of font-variant-alternates. Only one value is allowed. |
@ornaments | Specifies a feature name that works with the ornaments() functional notation of font-variant-alternates. One value is allowed. |
@stylistic | Specifies a feature name that works with the stylistic() functional notation of font-variant-alternates. Only one value is allowed. |
@styleset | Specifies a feature name that works with the styleset() functional notation of font-variant-alternates. Number of values are unlimited. |
@character-variant | Specifies a feature name that works with the character-variant() functional notation of font-variant-alternates. One or two values are allowed. |
initial | It makes the property use its default value. |
inherit | It inherits the property from its parents element. |
Browser support
✕ | ✕ | 34.0+ | 9.1+ | ✕ |
Practice Your Knowledge
Which of the following statements are true according to the CSS property 'font-feature-values'?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.