The font-variant-alternates property is one of the CSS3 properties that is generally used for enabling various font related features that can improve the appearance of the text on the page. The font-variant-alternates property is used to specifically select alternate glyphs.
For any given character, a variety of alternate glyphs can be provided by fonts in addition to the default glyph for that character. Through font-variant-alternates property you can select which specific glyph you require for a given situation.
Syntax:
font-variant-alternates: normal | historical-forms | stylistic() |
styleset() | character-variant() |
swash() | ornaments() | annotation();Property Values:
- Keyword Values: It takes keyword values as “normal” and “historical-forms”.
- Functional Notation Values: It takes functional notation values as “swash”, “ornaments”, “annotation”, “styleset”, “stylistic”.
- Global Values: It takes global values as “initial”, “inherit” and “unset”.
Example:
HTML
<!DOCTYPE html><html>
<head>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 5rem;
}
.variantAlternates {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
color: green;
}
</style>
</head>
<body>
<p class="variantAlternates">GeeksforGeeks</p>
</body>
</html>
|
Output:
Output for the above code.
Supported Browsers:
- Firefox 34
- Safari 9.1