CSS @stylistic At-Rule
The @stylistic at-rule maps a custom name to a stylistic alternate index inside @font-feature-values. The name can then be used in font-variant-alternates: stylistic().
@stylistic Syntax
@font-feature-values "Example Font" {
@stylistic {
alternate: 1;
}
}
.heading {
font-family: "Example Font", serif;
font-variant-alternates: stylistic(alternate);
}Inside @font-feature-values, @stylistic names an OpenType stylistic-alternate index for use with font-variant-alternates.
How @stylistic Works
The chosen font must include the corresponding alternate glyphs. The rule defines a mapping, not a downloadable font or a guaranteed visual effect.
The @stylistic at-rule maps a custom name to a stylistic alternate index inside @font-feature-values. The name can then be used in font-variant-alternates: stylistic().
The @stylistic rule is nested inside @font-feature-values and maps a readable name to an OpenType stylistic alternate index.
OpenType Feature
Stylistic alternates use the OpenType salt feature. The font must contain the requested alternate glyphs.
Use the defined name with font-variant-alternates: stylistic(name). The mapping is font-specific and does not create new glyphs.
Single Index
Each @stylistic name maps to a single positive integer, unlike @styleset, which may list multiple indexes.
Fallback Appearance
If the selected font does not contain the alternate, the normal glyph is displayed.
@stylistic Example
Check browser support and test the example in a compatible browser. For font-feature examples, the selected font must contain the requested OpenType feature.
HTML
<h2 class="heading">Sample typography</h2>CSS
@font-feature-values "Example Font" {
@stylistic {
alternate: 1;
}
}
.heading {
font-family: "Example Font", serif;
font-variant-alternates: stylistic(alternate);
}Note: "Example Font" is a placeholder. Replace it with an actual OpenType font containing the relevant alternate glyphs.
Browser Support
Support varies by feature and browser version. For current compatibility, consult Can I Use? and search for the relevant feature.
Different fonts may implement different stylistic alternates. Provide a normal typography fallback when the selected feature is unavailable.
Specifications
This feature is described in CSS Fonts Module Level 4.