CSS @font-feature-values Rule
The @font-feature-values at-rule sets a named value for certain font features 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. The number of values is 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 parent's element. |
0 Comments
CAN FEEDBACK
Emoji