font-variant-alternates

基线 2023

新功能

自 2023 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

font-variant-alternates CSS 属性控制备用字形的用法。这些备用字形可以通过在 @font-feature-values 中定义的备用名称来引用。

@font-feature-values at-规则可用于为给定的字体面关联一个人类可读的名称与一个数字索引，该索引控制特定的 OpenType 字体特性。对于选择备用字形的特性（stylistic、styleset、character-variant、swash、ornament 或 annotation），font-variant-alternates 属性可以引用人类可读的名称以应用关联的特性。

这允许 CSS 规则启用备用字形，而无需知道特定字体用于控制它们的特定索引值。

语法

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

html
<p>A Fancy Swash</p>
<p class="variant">A Fancy Swash</p>

CSS

css
@font-face {
  font-family: MonteCarlo;
  src: url("montecarlo-regular.woff2");
}

@font-feature-values "MonteCarlo" {
  @swash {
    fancy: 1;
  }
}

p {
  font-family: "MonteCarlo";
  font-size: 3rem;
  margin: 0.7rem 3rem;
}

.variant {
  font-variant-alternates: swash(fancy);
}

结果

规范

规范
CSS 字体模块级别 4
# font-variant-alternates-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅