--- title: font-variant-alternates slug: Web/CSS/font-variant-alternates translation_of: Web/CSS/font-variant-alternates ---
{{CSSRef}}

font-variant-alternates CSS属性控制备用字体的使用。 这些替代字体可以通过{{cssxref("@font-feature-values")}}中定义的替代名称来引用。

/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* Functional notation values */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* Global values */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

在 {{cssxref("@font-feature-values")}} 规则中可以定义替代字体的函数(stylistic, styleset, character-variant, swash, ornament 或 annotation), 将名称与OpenType参数相关联。 此属性允许样式表中使用那些易于理解的名称(定义于 {{cssxref("@font-feature-values")}})。

语法

font-variant-alternates属性可以采用以下两种形式之一:

取值

normal
此关键字禁用备用字体。
historical-forms
此关键字启用历史类型-过去常见但今天不常见的字体。 它对应于OpenType值 hist.
stylistic()
此函数可以为个别字体启用字体样式替换。该参数是特定于字体映射到数字的名称。 它对应于OpenType值 salt,例如salt 2
styleset()
此函数可以对字符集启用字体样式替换。 该参数是特定于字体映射到数字的名称。它对应于OpenType的值 ssXY, 例如 ss02
character-variant()
此函数启用字符的特定样式替代。 它与styleset()类似,但是不会为一组字符创建连贯的字形; 单个字符将具有独立且不一定一致的样式。 该参数是映射到数字的特定于字体的名称。 它对应于OpenType值 cvXY, 例如cv02
swash()
此函数启用斜字体。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 swsh 和 cswh,例如swsh 2 和cswh 2
ornaments()
此函数可启用装饰物,例如 fleurons 与其他dingbat字形。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 ornm,例如 ornm 2
注意: 为了保留文本语义,字体设计师应该包括与Unicode dingbat字符不匹配的装饰,作为项目符号字符(U + 2022)的装饰变体。请注意,某些现有字体不遵循此建议。
annotation()
此函数支持注释, 如带圆圈的数字或倒置的字符。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值nalt,例如 nalt 2

正式定义

{{CSSInfo}}

正式语法

{{csssyntax}}

示例

HTML

<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>

CSS

@font-feature-values "Leitura Display Swashes" {
    @swash { fancy: 1 }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}

结果

注意: 你需要安装 OpenType 字体 Leitura Display Swashes 才能使这个例子正常运行。您可以找到一些免费版本进行测试,例如从 fontsgeek.com.

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }}

规范

不属于任何标准。

浏览器兼容

{{Compat("css.properties.font-variant-alternates")}}