CSS - @font-feature-values

CSS at-rule @font-feature-values allows you to define custom values for OpenType font features, such as ligatures, stylistic alternates, swashes, or other advanced typographic features. This rule provides a way to control the usage of these features within specific elements of your document.

The @font-feature-values rule consists of two parts:

  • Selector: Specifies the element or elements to which the font features will be applied.

  • Font feature declarations: Defines the custom values for specific OpenType features.

You can use the @font-feature-values at-rule inside any CSS conditional-group-at-rule or at the top level of your CSS.

Possible Values

  • @swash − Defines a feature name that works with the swash() function of font-variant-alternates. It allows only one value. For example: ident1: 2 is valid, whereas ident1: 2 4 is invalid.

  • @annotation − Defines a feature name that works with the annotation() function of font-variant-alternates. It allows only one value. For example: ident1: 2 is valid, whereas ident1: 2 4 is invalid.

  • @ornaments − The ornaments() functional notation in font-variant-alternates for a feature name allows only a single value, such as ident1: 2 is valid, while ident2: 2 4 is not valid.

  • @stylistic − The stylistic() functional notation in font-variant-alternates for a feature name can only have a single value, such as ident1: 2 is valid, while ident2: 2 4 is not valid.

  • @styleset − The stylistic() functional notation in font-variant-alternates for a feature name allows an unlimited number of values, such as ident1: 2 4 12 1 maps to the OpenType values ss02, ss04, ss12, and ss01. Values greater than 99 are valid but do not correspond to any OpenType values and are disregarded.

  • @character-variant − The character-variant() functional notation in font-variant-alternates for a feature name allows either one or two values, such as ident1: 3 maps to cv03=1, and ident2: 2 4 maps to cv02=4, but ident2: 2 4 5 is invalid.

Syntax

@font-feature-values = 
   @font-feature-values <family-name># { <declaration-rule-list> }

CSS @font-feature-values - @swash

The following example demonstrates the use of @swash rule that sets the swash feature for the character 'fancy' to a value of 2. The font-variant-alternates: swash(fancy) property is used to apply the swash feature fancy to the text −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @swash {
         fancy: 2;
      }
   }
   .p1 {
      font-family: "CustomFont";
   }
   .swash-text {
      font-variant-alternates: swash(fancy);
   }
</style>
</head>
<body>  
   <p>'fancy' swash styling.</p>
   <p class="swash-text p1">'fancy' swash styling.</p>
</body>
</html>

CSS @font-feature-values - @annotation

The following example demonstrates the use of @font-feature-values to define annotation styles by assigning 's' to the value of 4. The font-variant-alternates: annotation(s) property is then used for applying the annotation feature 's' to the text −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @annotation {
         s: 4;
      }
   }
   .p1 {
      font-family: "CustomFont";
   }
   .annotation-text {
      font-variant-alternates: annotation(s);
   }
</style>
</head>
<body>
   <p class="annotation-text p1">'s' annotation styling.</p>
   <p>'s' annotation styling.</p>
</body>
</html>

CSS @font-feature-values - @ornaments

The following example demonstrates the use of @font-feature-values to define ornaments styles by assigning 'test' to the value of 12. The font-variant-alternates: ornaments(test) property is then used for applying the ornaments feature 'test' to the text −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @ornaments {
         test: 12;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: ornaments(test);
   }
</style>
</head>
<body>
   <p class="ornaments-text">'test' ornaments styling.</p>
   <p>'test' ornaments styling.</p>
</body>
</html>

CSS @font-feature-values - @stylistic

The following example demonstrates the use of @font-feature-values to define stylistic styles by assigning 'data' to the value of 2. The font-variant-alternates: stylistic(data) property is then used to apply the stylistic feature 'data' to the text −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/Brygada1918-Italic.ttf");
   }
   @font-feature-values "CustomFont" {
      @stylistic {
         data: 2;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: stylistic(data);
   }
</style>
</head>
<body>
  <p class="ornaments-text">'data' stylistic styling.</p>
  <p>'data' stylistic styling.</p>
</body>
</html>

CSS @font-feature-values - @styleset

The following example demonstrates the @font-feature-values to define a styleset feature named "fancy" with OpenType values 2, 4, 12, and 1. The font-variant-alternates property with the styleset() functional notation is used to apply the "fancy" styleset −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @styleset {
         fancy: 2 4 12 1;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: styleset(fancy);
   }
</style>
</head>
<body>
   <p class="ornaments-text">'fancy' styleset styling.</p>
   <p>'fancy' styleset styling.</p>
</body>
</html>

CSS @font-feature-values - @character-variant

The following example demonstrates the use of @font-feature-values to define a character-variant feature named "test1" with values 2,and 4. The font-variant-alternates property with the styleset() functional notation is then applied with "test1" character-variant −

<html>
<head>
<style>
   @font-face {
      font-family: CustomFont;
      src: url("font/SansationLight.woff");
   }
   @font-feature-values "CustomFont" {
      @character-variant {
         test1: 2 4;
      }
   }
   p {
      font-family: "CustomFont";
   }
   .ornaments-text {
      font-variant-alternates: character-variant(test1);
   }
   </style>
</head>
<body>
   <p class="ornaments-text">'test1' character-variant styling.</p>
   <p>'test1' character-variant styling.</p>
</body>
</html>
Advertisements