font-variant-alternates
Quick Summary for ornaments()
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.
Code Usage for ornaments()
/* Keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms;  /* Functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2);  /* Global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: revert; font-variant-alternates: unset; 
More Details for ornaments()

font-variant-alternates

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.

/* Keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-forms;  /* Functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2);  /* Global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: revert; font-variant-alternates: unset; 

The @font-feature-values at-rule can define names for alternative glyph functions (stylistic, styleset, character-variant, swash, ornament or annotation), associating the name with OpenType parameters. This property allows those human-readable names (defined in @font-feature-values) in the stylesheet.

Syntax

This property may take one of two forms:

either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order.

Values

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.

Note: In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

annotation()

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, like nalt 2.

Formal definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]

where <feature-value-name> = <custom-ident>

Examples

HTML

<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p> 

CSS

@font-feature-values "Leitura Display Swashes" {     @swash { fancy: 1 } }  p {   font-size: 1.5rem; }  .variant {   font-family: Leitura Display Swashes;   font-variant-alternates: swash(fancy); } 

Result

Note: You need to install the OpenType font Leitura Display Swashes for this example to work. You can find a few free versions for testing purposes, for example from fontsgeek.com.

Specifications

Not part of any standard.

See Also

font-variant font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Subscribe

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

Subscribe via Mailchimp

Random Quote
For a long time it had seemed to me that life was about to begin - real life. But there was always some obstacle in the way, something to be gotten through first, some unfinished business, time still to be served, or a debt to be paid. Then life would begin. At last it dawned on me that these obstacles were my life.
Alfred D. Souza
Random CSS Property

justify-self

The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
justify-self css reference