CSS @font-feature-values 规则允许您为 OpenType 字体功能定义自定义值，例如连字、样式替代、花饰字或其他高级排版功能。此规则提供了一种控制这些功能在文档的特定元素中的使用的方法。
@font-feature-values 规则由两部分组成：
- 选择器：指定要应用字体功能的一个或多个元素。
- 字体功能声明：定义特定 OpenType 功能的自定义值。
您可以在任何 CSS conditional-group-at-rule 中或在 CSS 的顶层使用 @font-feature-values 规则。
可能的值
- @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' 的花饰花字功能设置为值 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。带有 styleset（） 功能表示法的 font-variant-alternates 属性用于应用 “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 变体
以下示例演示如何使用 @font-feature-values 来定义名为 “test1” 的字符变体特征，其值为 2 和 4。然后，带有 styleset（） 功能表示法的 font-variant-alternates 属性将与 “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>
