{{CSSRef}}
Summary
The @font-feature-values
CSS at-rule allows authors to use a common name in {{cssxref("font-variant-alternate")}} for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.
@font-feature-values Font One { /* How to activate nice-style in Font One */ @styleset { nice-style: 12; } } @font-feature-values Font Two { /* How to activate nice-style in Font Two */ @styleset { nice-style: 4; } } … .nice-look { font-variant-alternate: styleset(nice-style); } /* Independent of the font */
The @
at-rule may be used at the top level of a CSS, but also inside any CSS conditional-group at-rule.font-feature-values
Syntax
@font-feature-values <font-family> { [ @swash | @ornaments | @annotation | @stylistic | @styleset | @character-variant { [ <IDENT>: <integer>+ ]? } ]? }
At-rules
Example
TBD
-
@swash
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "swash()", "#swash()")}} functional notation of {{cssxref("font-variant-alternates")}}. A swash feature value definition allows only one value:
ident1: 2
is valid whenident2: 2 4
isn't. -
@annotation
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} functional notation of {{cssxref("font-variant-alternates")}}. An annotation feature value definition allows only one value:
ident1: 2
is valid whenident2: 2 4
isn't. -
@ornaments
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} functional notation of {{cssxref("font-variant-alternates")}}. An ornaments feature value definition allows only one value:
ident1: 2
is valid whenident2: 2 4
isn't. -
@stylistic
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistice feature value definition allows only one value:
ident1: 2
is valid whenident2: 2 4
isn't. -
@styleset
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows and illimited amount of values:
ident1: 2 4 12 1
maps to the OpenType valuesss02
,ss04
,ss12
,ss01
. Note that values higher than99
are valid, but doesn't map to any OpenType values and are ignored. -
@character-variant
-
Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows one or two values:
ident1: 2
maps tocv02=1
andident2: 2 4
maps tocv02)4
andident2: 2 4 5
isn't valid.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}} | {{Spec2('CSS3 Fonts')}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatGeckoDesktop("34")}} [1] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatUnknown}} | {{CompatGeckoMobile("34")}} [1] | {{CompatUnknown}} | {{CompatUnknown}} | {{CompatUnknown}} |
[1] Experimental implementation of the CSS Fonts Level 3 extensions was available since Gecko 24. It was governed by the preference layout.css.font-features.enabled
defaulting to true
on Nightly and Aurora only.
See also
- The {{cssxref("font-variant-alternates")}} property that uses values that this at-rule defines.
- {{CSS_Reference:Fonts}}