CSS - @font-feature-values

The @font-feature-values CSS at-rule allows authors to use a common name in font-variant-alternates for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.

Syntax  

Feature value blocks

@swash
Specifies a feature name that will work with the swash() functional notation of font-variant-alternates. A swash feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
@annotation
Specifies a feature name that will work with the annotation() functional notation of font-variant-alternates. An annotation feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
@ornaments
Specifies a feature name that will work with the ornaments() functional notation of font-variant-alternates. An ornaments feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
@stylistic
Specifies a feature name that will work with the stylistic() functional notation of font-variant-alternates. A stylistice feature value definition allows only one value: ident1: 2 is valid when ident2: 2 4 isn't.
@styleset
Specifies a feature name that will work with the styleset() functional notation of font-variant-alternates. A stylset feature value definition allows and illimited amount of values: ident1: 2 4 12 1maps to the OpenType values ss02, ss04, ss12, ss01. Note that values higher than 99 are valid, but doesn't map to any OpenType values and are ignored.
@character-variant
Specifies a feature name that will work with the character-variant() functional notation of font-variant-alternates. A character-variant feature value definition allows one or two values: ident1: 2  maps to cv02=1 and ident2: 2 4 maps to cv02)4 and ident2: 2 4 5 isn't valid.

Formal syntax

CSS
@font-feature-values <font-family> {
  <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> @swash <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> @ornaments <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> @annotation <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> @stylistic <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> @styleset <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> @character-variant
  {
    <a title="Brackets" href="css/value_definition_syntax#brackets">[</a> <IDENT>: <a title="" href="css/integer"><integer></a><a title="Plus" href="css/value_definition_syntax#plus_(.2b)">+</a> <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a>
  }
  <a title="Brackets" href="css/value_definition_syntax#brackets">]</a><a title="Question mark" href="css/value_definition_syntax#question_mark_(.3f)">?</a>
}

Description  

The @font-feature-values CSS at-rule allows authors to use a common name in font-variant-alternates for feature activated differently in OpenType. It allows to simplify the CSS when using several fonts.

CSS
@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-alternates: styleset(nice-style); } /* Independent of the font */

The @font-feature-values at-rule may be used at the top level of a CSS, but also inside any CSS conditional-group at-rule.

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support ? 34 (34) [1] ? ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 34.0 (34) [1] ? ? ?

[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  

Specifications  

Specification Status Comment
CSS Fonts Module Level 3
The definition of '@font-feature-values' in that specification.
Candidate Recommendation Initial definition

License

© 2016 Mozilla 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

At-rule CSS Fonts Reference