--- title: font-variant-alternates slug: Web/CSS/font-variant-alternates translation_of: Web/CSS/font-variant-alternates ---
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
normal
historical-forms
hist
.stylistic()
salt
,例如salt 2
。styleset()
ssXY
, 例如 ss02
。character-variant()
cvXY
, 例如cv02
。swash()
swsh
和 cswh
,例如swsh 2
和cswh 2
。ornaments()
ornm
,例如 ornm 2
。
annotation()
nalt
,例如 nalt 2
。{{CSSInfo}}
<p>Firefox rocks!</p> <p class="variant">Firefox rocks!</p>
@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")}}