font-variant-alternates
font-variant-alternates CSS 属性控制替代字形的使用。这些替代字形可以通过 @font-feature-values 中定义的替代名称进行引用。
@font-feature-values at-rule 可用于为给定的字体面关联一个人类可读的名称与一个数字索引，该索引控制特定的 OpenType 字体特性。对于选择替代字形的特性（stylistic、styleset、character-variant、swash、ornament 或 annotation），font-variant-alternates 属性可以引用人类可读的名称以应用相关特性。
这允许 CSS 规则启用替代字形，而无需知道特定字体用于控制它们的具体索引值。
语法
/* 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: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;
此属性可以采用以下两种形式之一：
- 关键字
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()-
此函数启用装饰，例如花饰和其他杂锦字形。参数是映射到数字的字体特定名称。它对应于 OpenType 值
ornm，例如ornm 2。注意： 为了保留文本语义，字体设计者应将不与 Unicode 杂锦字符匹配的装饰作为项目符号字符 (U+2022) 的装饰变体。请注意，一些现有字体不遵循此建议。
annotation()-
此函数启用注释，例如带圆圈的数字或反转字符。参数是映射到数字的字体特定名称。它对应于 OpenType 值
nalt，例如nalt 2。
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素和文本。它也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 计算值 | 同指定值 |
| 动画类型 | 离散 |
正式语法
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>
示例
启用花式字字形
在此示例中，我们使用 @font-feature-values at-rule 为 MonteCarlo 字体的 swash 特性定义一个名称。该规则将名称 "fancy" 映射到索引值 1。
然后我们可以在 font-variant-alternates 中使用该名称来为该字体启用花式字。这等同于 font-feature-settings: "swsh" 1 这样的行，只不过应用该特性的 CSS 不需要包含，甚至不需要知道，此特定字体所需的索引值。
HTML
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>
CSS
@font-face {
font-family: "MonteCarlo";
src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}
@font-feature-values "MonteCarlo" {
@swash {
fancy: 1;
}
}
p {
font-family: "MonteCarlo", cursive;
font-size: 3rem;
margin: 0.7rem 3rem;
}
.variant {
font-variant-alternates: swash(fancy);
}
结果
规范
| 规范 |
|---|
| CSS 字体模块第 4 级 # font-variant-alternates-prop |
浏览器兼容性
加载中…