CSS - font-variant-alternates Property

The font-variant-alternates CSS property is used to control the usage of alternate glyphs for a given character within a font.

Possible Values

1. normal: Deactivates alternate glyphs.

2. one or more of the keywords given below:

  • historical-forms: Enables historical alternate glyphs. Corresponds to OpenType value hist.

  • stylistic(): Enables stylistic alternate glyphs for individual characters. Corresponds to OpenType value salt (salt 2).

  • styleset(): Enables stylistic alternate glyphs for sets of characters. Font-specific name is mapped to a number. Corresponds to OpenType value ssXY (ss02).

  • character-variant(): Similar to styleset(), but do not create coherent glyphs for a set of characters, instead for individual characters. OpenType value cvXY (cv02).

  • swash(): Enables swash glyphs. Font-specific name is mapped to a number. Corresponds to OpenType value swsh (swsh 2) and cswh (cswh 2).

  • ornaments(): Enables ornaments and other dingbat glyphs. Font-specific name is mapped to a number. Corresponds to OpenType value ornm (ornm 2)

  • annotation(): Enables annotations, such as inverted characters or circled digits. Font-specific name is mapped to a number. Corresponds to OpenType value nalt (nalt 2)

Applies to

All the HTML elements.

DOM Syntax

object.style.fontVariantAlternates = "normal | swash() | stylistic() | styleset() | character-variant() | ornaments()";

CSS font-variant-alternates - Usage of swash()

Following example demonstrates the use of swash() function that takes a parameter which is a font-specific name that is mapped to a number. @font-feature-values at-rule is used to define a name for the swash feature of the "SansationLight" font. Later the font-variant-alternate property takes the swash name as the value:

<html>
<head>
<style>
   @font-face {
      font-family: "f1";
      src: url("font/SansationLight.woff");
   }

   @font-feature-values "f1" {
      @swash {
         fancy: 2;
      }
   }

   h1 {
      font-family: "f1";
      font-size: 3rem;
   }

   p {
      background-color: aqua;
   }

   .variant {
      font-variant-alternates: swash(fancy);
      font-size: 4rem;
   }
</style>
</head>
<body>
   <h1>Heading without variant</h1>
   <h1 class="variant">Heading with variant</h1>
</body>
</html>

CSS font-variant-alternates - Usage of stylistic()

Following example demonstrates the use of stylistic() function that takes a parameter which is a font-specific name that is mapped to a number. @font-feature-values at-rule is used to define a name for the swash feature of the "SansationLight" font. Later the font-variant-alternate property takes the stylistic function with the defined name as the value:

<html>
<head>  
<style>
   @font-face {
      font-family: "f1";
      src: url("font/SansationLight.woff");
   }

   @font-feature-values "f1" {
      @stylistic {
         s: 1;
      }
   }

   h1 {
      font-family: "f1";
      font-size: 3rem;
   }

   p {
      background-color: aqua;
   }

   .variant {
      font-variant-alternates: stylistic(s);
   }
</style>
</head>
<body>
   <p>Notice the character 'g' in both the headings</p>
   <h1>Heading without variant</h1>
   <h1 class="variant" >Heading with variant</h1>
</body>
</html>
Advertisements