@font-feature-values - CSS（层叠样式表） 编辑

概要

@font-feature-values CSS at-rule 允许作者在font-variant-alternates 中使用通用名称，用于在OpenType中以不同方式激活功能。它允许在使用几种字体时简化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.

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

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

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3 @font-feature-values	Candidate Recommendation	Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

• Desktop
• Mobile

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

• The font-variant-alternates property that uses values that this at-rule defines.