@font-feature-values CSS At-Rule

Description

The @font-feature-values CSS at-rule allows you to define named values for font features, which can then be used in the font-variant-alternates property. This can be useful for simplifying your CSS when working with multiple fonts, as it allows you to use the same named value for a font feature even if it is activated differently in different fonts.

The @font-feature-values at-rule can be used at the top level of your CSS or inside any CSS conditional-group at-rule. It takes two parameters: the name of the font feature and the value(s) for that feature. The value(s) can be either a single identifier or a list of identifiers, separated by spaces.

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>+;

Values

@swashSets the name of the function that will work with the function notation swash() for font-variant-alternates. A function value definition swash allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@annotationSets the name of the function that will work with the function notation annotation() for font-variant-alternates. A function value definition allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@ornamentsSets the name of the function that will work with the function notation ornaments() for font-variant-alternates. A function value definition ornaments allows only one value: ident1: 2 is valid, but ident2: 2 4 is not.
@stylisticSpecifies the name of the function that will work with functional notation stylistic() font-option-alternates. The definition of the value of a stylistic feature allows only one meaning: ident1: 2 is valid, but identif2: 2 4 is not.
@stylesetSpecifies the name of the function that will work with functional notation styleset() font-option-alternates. The stylet function value definition allows an unlimited number of values: identif1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12 and ss01. Note that values above 99 are valid but do not map to any OpenType values and are ignored.
@character-variantSpecifies the name of the function that will work with functional notation character-variant() font-variant-alternates. The characteristic value definition in the symbolic variant allows one or two values: ident1: 3 maps to cv03 = 1, and ident2: 2 4 maps to cv02 = 4, but ident2: 2 4 5 is not allowed.

Example

/* 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);

}