CSS - @font-feature-values

CSS at-rule @font-feature-values 允许您为 OpenType 字体功能（例如连字、风格替换、装饰或其他高级排版功能）定义自定义值。此规则提供了一种方法来控制文档特定元素中这些功能的使用。

@font-feature-values 规则由两部分组成

选择器：指定将应用字体功能的元素或元素。
字体功能声明：为特定 OpenType 功能定义自定义值。

您可以在任何 CSS 条件组 at-rule 内部或 CSS 的顶层使用 @font-feature-values at-rule。

可能的值

@swash − 定义一个与 font-variant-alternates 的 swash() 函数一起使用的功能名称。它仅允许一个值。例如：ident1: 2 有效，而 ident1: 2 4 无效。
@annotation − 定义一个与 font-variant-alternates 的 annotation() 函数一起使用的功能名称。它仅允许一个值。例如：ident1: 2 有效，而 ident1: 2 4 无效。
@ornaments − font-variant-alternates 中功能名称的 ornaments() 函数表示法仅允许单个值，例如 ident1: 2 有效，而 ident2: 2 4 无效。
@stylistic − font-variant-alternates 中功能名称的 stylistic() 函数表示法只能具有单个值，例如 ident1: 2 有效，而 ident2: 2 4 无效。
@styleset − font-variant-alternates 中功能名称的 stylistic() 函数表示法允许无限数量的值，例如 ident1: 2 4 12 1 映射到 OpenType 值 ss02、ss04、ss12 和 ss01。大于 99 的值有效，但不对应于任何 OpenType 值，并且会被忽略。
@character-variant − font-variant-alternates 中功能名称的 character-variant() 函数表示法允许一个或两个值，例如 ident1: 3 映射到 cv03=1，而 ident2: 2 4 映射到 cv02=4，但 ident2: 2 4 5 无效。

语法

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

CSS @font-feature-values - @swash

以下示例演示了 @swash 规则的使用，该规则将字符 'fancy' 的 swash 功能设置为 2。font-variant-alternates: swash(fancy) 属性用于将 swash 功能 fancy 应用于文本 -

<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

以下示例演示了 @font-feature-values 的使用，通过将 's' 分配给 4 的值来定义注释样式。然后使用 font-variant-alternates: annotation(s) 属性将注释功能 's' 应用于文本 -

<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

以下示例演示了 @font-feature-values 的使用，通过将 'test' 分配给 12 的值来定义装饰样式。然后使用 font-variant-alternates: ornaments(test) 属性将装饰功能 'test' 应用于文本 -

<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

以下示例演示了 @font-feature-values 的使用，通过将 'data' 分配给 2 的值来定义风格样式。然后使用 font-variant-alternates: stylistic(data) 属性将风格功能 'data' 应用于文本 -

<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

以下示例演示了 @font-feature-values 用于定义一个名为 "fancy" 的样式集功能，其 OpenType 值为 2、4、12 和 1。font-variant-alternates 属性与 styleset() 函数表示法一起使用以应用 "fancy" 样式集 -

<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

以下示例演示了 @font-feature-values 的使用，通过定义一个名为 "test1" 的字符变体功能并将其值设置为 2 和 4。然后使用 font-variant-alternates 属性与 styleset() 函数表示法一起应用 "test1" 字符变体 -

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

打印页面