字体变体交替 | 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该关键字可以禁用替代字形。
historical-forms这个关键字使历史形式 - 过去常见但不是今天的字形。它对应于OpentType的值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 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 | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
