在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @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 at-rule can define names for alternative glyph functions ( stylistic , styleset , character-variant , swash , ornament or annotation ), associating the name with OpenType parameters. This property allows those human-readable names (defined in @font-feature-values ) in the stylesheet.

句法

This property may take one of two forms:

• either the keyword normal
• or one or more of the other keywords and functions listed below, space-separated, in any order.

值

normal

This keyword deactivates alternate glyphs.

historical-forms

This keyword enables historical forms — glyphs that were common in the past but not today. It corresponds to the OpenType value hist .

stylistic()

This function enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt , like salt 2 .

styleset()

This function enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY , like ss02 .

character-variant()

This function enables specific stylistic alternatives for characters. It is similar to styleset() , but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY , like cv02 .

swash()

This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh , like swsh 2 and cswh 2 .

ornaments()

This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm , like ornm 2 . 注意： In order to preserve text semantics, font designers should include ornaments that don't match Unicode dingbat characters as ornamental variants of the bullet character (U+2022). Be aware that some existing fonts don't follow this advice.

annotation()

This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt , like nalt 2 .

形式定义

初始值	normal
适用于	所有元素。它还适用于 ::first-letter and ::first-line .
继承	yes
计算值	如指定
动画类型	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);
}
					

结果

注意： You need to install the OpenType font Leitura Display Swashes for this example to work. You can find a few free versions for testing purposes, for example from fontsgeek.com .

规范

Not part of any standard.

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
font-variant-alternates 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
annotation() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
character-variant() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
ornaments() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
styleset() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
stylistic() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
swash() 弃用	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 34 完整支持 34 不支持 24 — 34 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

弃用。不要用于新网站。

弃用。不要用于新网站。

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： 2020 年 7 月 29 日

相关话题

1. CSS
2. CSS 参考
3. CSS 字体
4. 指南

   1. OpenType font features guide
   2. Variable fonts guide
5. At-Rules

   1. @font-face
   2. @font-feature-values
6. 特性

   1. font
   2. font-family
   3. font-feature-settings
   4. font-kerning
   5. font-language-override
   6. font-optical-sizing
   7. font-size
   8. font-size-adjust
   9. font-smooth
   10. font-stretch
   11. font-style
   12. font-synthesis
   13. font-variant
   14. font-variant-alternates
   15. font-variant-caps
   16. font-variant-east-asian
   17. font-variant-ligatures
   18. font-variant-numeric
   19. font-variant-position
   20. font-variation-settings
   21. font-weight
   22. line-height
   23. line-height-step