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.
/* 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); }
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.
@swash
swash()
functional notation of font-variant-alternates
. A swash feature value definition allows only one value: ident1: 2
is valid, but ident2: 2 4
isn't.@annotation
annotation()
functional notation of font-variant-alternates
. An annotation feature value definition allows only one value: ident1: 2
is valid, but ident2: 2 4
isn't.@ornaments
ornaments()
functional notation of font-variant-alternates
. An ornaments feature value definition allows only one value: ident1: 2
is valid, but ident2: 2 4
isn't.@stylistic
stylistic()
functional notation of font-variant-alternates
. A stylistic feature value definition allows only one value: ident1: 2
is valid, but ident2: 2 4
isn't.@styleset
styleset()
functional notation of font-variant-alternates
. A stylset feature value definition allows an unlimited number of values: ident1: 2 4 12 1
maps to the OpenType values ss02
, ss04
, ss12
, and ss01
. Note that values higher than 99
are valid, but don't map to any OpenType values and are ignored.@character-variant
character-variant()
functional notation of font-variant-alternates
. A character-variant feature value definition allows either one or two values: ident1: 3
maps to cv03=1
, and ident2: 2 4
maps to cv02=4
, but ident2: 2 4 5
is invalid.@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>+;
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of '@font-feature-values' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | No | No | 34
|
No | No | 9.1 |
@annotation
|
No | No | 34
|
No | No | 9.1 |
@character-variant
|
No | No | 34
|
No | No | 9.1 |
@historical-forms
|
No | No | 34
|
No | No | 9.1 |
@ornaments
|
No | No | 34
|
No | No | 9.1 |
@styleset
|
No | No | 34
|
No | No | 9.1 |
@stylistic
|
No | No | 34
|
No | No | 9.1 |
@swash
|
No | No | 34
|
No | No | 9.1 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | No | No | 34
|
No | 9.3 | No |
@annotation
|
No | No | No | 34
|
No | 9.3 | No |
@character-variant
|
No | No | No | 34
|
No | 9.3 | No |
@historical-forms
|
No | No | No | 34
|
No | 9.3 | No |
@ornaments
|
No | No | No | 34
|
No | 9.3 | No |
@styleset
|
No | No | No | 34
|
No | 9.3 | No |
@stylistic
|
No | No | No | 34
|
No | 9.3 | No |
@swash
|
No | No | No | 34
|
No | 9.3 | No |
font-variant-alternates
property that uses values that this at-rule defines.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-feature-values