font-variant-alternates
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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 |
---|---|
适用元素 | 所有元素和文本. It also applies to ::first-letter and ::first-line . |
是否是继承属性 | 是 |
计算值 | as specified |
动画类型 | 离散值 |
正式语法
font-variant-alternates =
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> ) ]
<feature-value-name> =
<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