CSS - font-variant-alternates 属性

font-variant-alternates CSS 属性用于控制在字体中给定字符的备用字形的用法。

可能的值

1. normal：禁用备用字形。

2. 以下关键字中的一个或多个：

historical-forms：启用历史备用字形。对应于 OpenType 值 hist。
stylistic()：为单个字符启用风格化备用字形。对应于 OpenType 值 salt (salt 2)。
styleset()：为字符集启用风格化备用字形。字体特定名称映射到一个数字。对应于 OpenType 值 ssXY (ss02)。
character-variant()：类似于 styleset()，但不为一组字符创建连贯的字形，而是为单个字符创建。OpenType 值 cvXY (cv02)。
swash()：启用装饰字形。字体特定名称映射到一个数字。对应于 OpenType 值 swsh (swsh 2) 和 cswh (cswh 2)。
ornaments()：启用装饰和其它装饰字形。字体特定名称映射到一个数字。对应于 OpenType 值 ornm (ornm 2)
annotation()：启用注释，例如反向字符或带圆圈的数字。字体特定名称映射到一个数字。对应于 OpenType 值 nalt (nalt 2)

应用于

所有 HTML 元素。

DOM 语法

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

CSS font-variant-alternates - swash() 的用法

以下示例演示了 swash() 函数的用法，该函数接受一个参数，该参数是映射到数字的字体特定名称。@font-feature-values at-rule 用于为“SansationLight”字体的装饰功能定义一个名称。稍后，font-variant-alternate 属性将装饰名称作为值。

<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 - stylistic() 的用法

以下示例演示了 stylistic() 函数的用法，该函数接受一个参数，该参数是映射到数字的字体特定名称。@font-feature-values at-rule 用于为“SansationLight”字体的装饰功能定义一个名称。稍后，font-variant-alternate 属性将带有所定义名称的 stylistic 函数作为值。

<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>

打印页面