CSS 属性

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():启用装饰物和其他 dingbat 字形。特定于字体的名称映射到数字。对应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>没有变体的标题</h1>
    <h1 class="variant">带有变体的标题</h1>
</body>
</html>

CSS font-variant-alternates: stylistic()

以下示例演示了 stylistic 的使用() 函数接受一个参数，该参数是映射到数字的特定于字体的名称。 @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" {
      @stylistic {
         s: 1;
      }
   }

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

   p {
      background-color: aqua;
   }

   .variant {
      font-variant-alternates: stylistic(s);
   }
</style>
</head>
<body>
      <p>注意两个标题中的字符“g”</p>
    <h1>没有变体的标题</h1>
    <h1 class="variant" >带有变体的标题</h1>
</body>
</html>