The @font-feature-values
CSS at-rule lets you use a common name in the font-variant-alternates
property for features activated differently in OpenType. This can help simplify your CSS when using multiple fonts.
The @font-feature-values
at-rule may be used either at the top level of your CSS or inside any CSS conditional-group at-rule.
Syntax
Feature value blocks
@swash
- Specifies a feature name that will work with the
swash()
functional notation offont-variant-alternates
. A swash feature value definition allows only one value:ident1: 2
is valid, butident2: 2 4
isn't. @annotation
- Specifies a feature name that will work with the
annotation()
functional notation offont-variant-alternates
. An annotation feature value definition allows only one value:ident1: 2
is valid, butident2: 2 4
isn't. @ornaments
- Specifies a feature name that will work with the
ornaments()
functional notation offont-variant-alternates
. An ornaments feature value definition allows only one value:ident1: 2
is valid, butident2: 2 4
isn't. @stylistic
- Specifies a feature name that will work with the
stylistic()
functional notation offont-variant-alternates
. A stylistic feature value definition allows only one value:ident1: 2
is valid, butident2: 2 4
isn't. @styleset
- Specifies a feature name that will work with the
styleset()
functional notation offont-variant-alternates
. A stylset feature value definition allows an unlimited number of values:ident1: 2 4 12 1
maps to the OpenType valuesss02
,ss04
,ss12
, andss01
. Note that values higher than99
are valid, but don't map to any OpenType values and are ignored. @character-variant
- Specifies a feature name that will work with the
character-variant()
functional notation offont-variant-alternates
. A character-variant feature value definition allows either one or two values:ident1: 3
maps tocv03=1
, andident2: 2 4
maps tocv02=4
, butident2: 2 4 5
is invalid.
Formal syntax
@font-feature-values <family-name># { <feature-value-block-list> }where
<family-name> = <string> | <custom-ident>+
<feature-value-block-list> = <feature-value-block>+where
<feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'
where
<feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation
<feature-value-declaration-list> = <feature-value-declaration>where
<feature-value-declaration> = <custom-ident>: <integer>+;
Examples
Using @styleset in a @font-feature-values rule
/* 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); }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of '@font-feature-values' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@font-feature-values | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@annotation | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@character-variant | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@historical-forms | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@ornaments | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@styleset | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@stylistic | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
@swash | Chrome No support No | Edge No support No | Firefox
Full support
34
| IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
34
| Opera Android No support No | Safari iOS Full support 9.3 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
- The
font-variant-alternates
property that uses values that this at-rule defines.