font-variant-alternates - CSS（层叠样式表） 编辑

font-variant-alternates CSS属性控制备用字体的使用。 这些替代字体可以通过@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;

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

语法

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

• 默认值 normal
• 一个或多个关键词及函数，使用任意顺序用空格分隔。

取值

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。

正式定义

初始值	normal
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	yes
计算值	as specified
Animation type	discrete

正式语法

normal | [ stylistic( <feature-value-name> ) || historical-forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) ]
where 
<feature-value-name> = <custom-ident>

示例

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.

规范

不属于任何标准。

浏览器兼容

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.