CSS font-variant-alternates Property

❮ Previous Reference Next ❯

Example

p {
  font-variant-alternates: historical-forms;
}

Meaning:

The font-variant-alternates CSS property controls the usage of alternate glyphs.

These alternate glyphs may be referenced by alternative names defined in @font-feature-values.

Default value:normal
Inherited:Yes
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.fontVariantAlternates="value";



Standard Syntax

font-variant-alternates: value;



Browser Support




Status







Property Values

The following table describes the values of this property:

Value Description
normal This keyword deactivates alternate glyphs.
historical-forms This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value hist.
stylistic() This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.
styleset() This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, like ss02.
character-variant() This function enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, like cv02.
swash() This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.
ornaments() This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.



Default CSS Property Values

selectors {
  font-variant-alternates: normal;
}
❮ Previous Reference Next ❯