CSS - 字体函数

font-variant-alternates

CSS 属性font-variant-alternates管理备用字形的用法，这些字形可以通过@font-feature-values中定义的名称来引用。

此属性可用于将字体的易于理解的名称与控制某些 OpenType 字体功能的数字索引关联。
对于选择备用字形的功能（例如stylistic、styleset、character variant、swash、ornament或annotation），font-variant-alternates可以使用链接的名称应用关联的功能。
这种方法允许 CSS 规则启用备用字形，而无需了解字体使用的特定索引值。

此属性有两种可能的格式。

可以使用关键字normal指定。

或者，可以使用一个或多个列出的关键字和函数来定义，这些关键字和函数用空格分隔，并且可以按任何顺序排列。

可能的值

normal - 此关键字禁用备用字形。
historical-forms - 此关键字激活历史形式，这些形式表示过去广泛使用但现在不再常用的字形。它对应于 OpenType 值hist。
stylistic() - 此函数使用与数字关联的字体特定名称激活某些字符的风格替换字形。它对应于 OpenType 值salt和salt2。
stylesheet() - 此函数激活字符组的风格替换字形。参数是与数字关联的字体特定名称，例如ss02，对应于 OpenType 值ssXY。
character-variant() - 此函数允许单个字符具有不同的风格变化，这与styleset()不同，后者为字符集创建一致的字形。参数是与数字关联的字体特定名称（例如cv02），对应于 OpenType 值cvXY。
swash() - 此函数激活带有与数字关联的字体特定名称的衬线字形，例如swsh 2和cswh 2，对应于 OpenType 值swsh和cswh。
ornaments() - 此函数激活装饰，例如花饰和装饰字形，使用与数字关联的字体特定名称，例如ornm 2，对应于 OpenType 值ornm。
annotation() - 此函数允许注释，例如带圆圈的数字或反向字符，使用与数字关联的字体特定名称，例如nalt 2，对应于 OpenType 值nalt。

语法

font-variant-alternates: normal | stylistic(<feature>) || historical-forms || styleset(<feature>) || character-variant(<feature>) || swash(<feature>) || ornaments(<feature>) || annotation(<feature>);

应用于

所有 HTML 元素。它也适用于::first-letter和::first-line。

CSS 字体函数 - 衬线字形

以下示例演示如何启用衬线字形

<html>
<head>
<style>
   @font-face {
      font-family: 'Playfair Display';
      src: url('PlayfairDisplay-Regular.ttf');
   }
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
   }
   @font-face {
      font-family: 'Great Vibes';
      src: url('GreatVibes-Regular.ttf');
   }
   .swash {
      font-size: 3rem;
      margin: 1rem;
      display: inline-block;
      font-family: 'Playfair Display', serif;
   }
   .swash.lobster {
      font-family: 'Lobster', cursive;
   }
   .swash.great-vibes {
      font-family: 'Great Vibes', cursive;
   }
</style>
</head>
<body>
   <h1>Swash Enabling Glyphs</h1>
   <div class="swash">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash lobster">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
   <div class="swash great-vibes">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</div>
</body>
</html>

CSS 字体函数 - 衬线字形

以下示例演示如何启用衬线字形

<html>
<head>
<style>
   @font-face {
      font-family: 'Lobster';
      src: url('Lobster-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   @font-face {
      font-family: 'Kaushan Script';
      src: url('KaushanScript-Regular.ttf');
      font-weight: normal;
      font-style: normal;
   }
   .swash {
      font-family: 'Lobster', cursive;
      font-size: 50px;
      color: #FF5733;
   }
   .normal {
      font-family: 'Kaushan Script', cursive;
      font-size: 50px;
      color: #FFC300;
   }
</style>
</head>
<body>
   <h1>Swash Glyphs</h1>
   <p class="swash">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
   <p class="normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
</html>

打印页面