字体变体交替 | font-variant-alternates

font-variant-alternates

font-variant-alternatesCSS属性控制替代字形的使用。这些替代字形可以通过中定义的替代名称来引用@font-feature-values。

font-variant-alternates: normal;
font-variant-alternates: historical-forms;
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样式表中的人们可读的名字（定义在）中。

初始值	normal
应用于	all elements. It also applies to ::first-letter and ::first-line.
是否继承	yes
支持的媒体	visual
计算值	as specified
动画类型	discrete
规范顺序	order of appearance in the formal grammar of the values

语法

值可以采取两种形式之一：

关键字normal

或以下列出的一个或多个其他关键字和功能，以任何顺序空格分隔。

值

normal该关键字可以禁用替代字形。

注意：为了保留文本语义，字体设计师应该包括不符合Unicode dingbat字符作为子弹字符（U + 2022）的装饰变体的装饰物。格式良好的字体可以做到这一点，但是一些现有的字体却没有。

annotation()此函数支持注释，如圈形数字或倒排字符。该参数是映射到数字的特定字体名称.。它对应于OpenType值nalt，就像nalt 2...

形式语法

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

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(2
}

结果

注：您需要安装OpenType字体莱图拉显示花边此示例才能工作。

规范

Specification	Status	Comment
CSS Fonts Module Level 3The definition of 'font-variant-alternates' in that specification.	Candidate Recommendation	Initial definition

浏览器兼容性

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Basic support	34 (34) 1	?	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	34.0 (34)1	?	?	?