font-variant-alternates

翻译不完整。 请帮助我们翻译这篇文章!

font-variant-alternates CSS属性控制备用字体的使用。 这些替代字体可以通过@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 规则中可以定义替代字体的函数(stylistic, styleset, character-variant, swash, ornament 或 annotation), 将名称与OpenType参数相关联。 此属性允许样式表中使用那些易于理解的名称(定义于 @font-feature-values)。

语法

font-variant-alternates属性可以采用以下两种形式之一:

  • 默认值 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()
此函数可启用装饰物,例如 fleurons 与其他dingbat字形。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 ornm,例如 ornm 2
注意: 为了保留文本语义,字体设计师应该包括与Unicode dingbat字符不匹配的装饰,作为项目符号字符(U + 2022)的装饰变体。请注意,某些现有字体不遵循此建议。
annotation()
此函数支持注释, 如带圆圈的数字或倒置的字符。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值nalt,例如 nalt 2

正式定义

初始值normal
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
计算值as specified
Animation typediscrete

正式语法

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);
}

结果

注意: 你需要安装 OpenType 字体 Leitura Display Swashes 才能使这个例子正常运行。您可以找到一些免费版本进行测试,例如从 fontsgeek.com.

规范

不属于任何标准。

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-variant-alternates
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
annotation()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
character-variant()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ornaments()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
styleset()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
stylistic()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
swash()
Deprecated
Chrome No support NoEdge No support NoFirefox Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 34
Full support 34
No support 24 — 34
Disabled
Disabled From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
User must explicitly enable this feature.
User must explicitly enable this feature.