@font-feature-values
The @font-feature-values CSS at-rule lets you use a common name in the {{cssxref("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
Each @font-feature-values block contains a list of either feature value blocks (listed below), or the {{cssxref("@font-feature-values/font-display", "font-display")}} descriptor.
Feature value blocks
@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: 2is valid, butident2: 2 4isn't.
- : 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:
@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: 2is valid, butident2: 2 4isn't.
- : 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:
@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: 2is valid, butident2: 2 4isn't.
- : 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:
@stylistic- : Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value:
ident1: 2is valid, butident2: 2 4isn't.
- : Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value:
@styleset- : Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset")}} functional notation of {{cssxref("font-variant-alternates")}}. A styleset feature value definition allows an unlimited number of values:
ident1: 2 4 12 1maps to the OpenType valuesss02,ss04,ss12, andss01. Note that values higher than99are valid, but don't map to any OpenType values and are ignored.
- : Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset")}} functional notation of {{cssxref("font-variant-alternates")}}. A styleset feature value definition allows an unlimited number of values:
@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 either one or two values:
ident1: 3maps tocv03=1, andident2: 2 4maps tocv02=4, butident2: 2 4 5is invalid.
- : 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 either one or two values:
Formal syntax
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
Browser compatibility
See also
- The {{cssxref("font-variant-alternates")}} property that uses values that this at-rule defines.