files/zh-cn/web/css/font-variant-alternates/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

---
title: font-variant-alternates
slug: Web/CSS/font-variant-alternates
translation_of: Web/CSS/font-variant-alternates
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong> CSS属性控制备用字体的使用。 </span>这些替代字体可以通过<span class="seoSummary">{{cssxref("@font-feature-values")}}</span>中定义的替代名称来引用。</p>

<pre class="brush:css no-line-numbers notranslate">/* 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;
</pre>

<p>在 {{cssxref("@font-feature-values")}} 规则中可以定义替代字体的函数(<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> 或 <code>annotation</code>), 将名称与OpenType参数相关联。 此属性允许样式表中使用那些易于理解的名称(定义于 {{cssxref("@font-feature-values")}})。</p>

<h2 id="语法">语法</h2>

<p><span class="seoSummary"><strong><code>font-variant-alternates</code></strong></span>属性可以采用以下两种形式之一：</p>

<ul>
 <li>默认值 <code>normal</code></li>
 <li>一个或多个关键词及函数，使用任意顺序用空格分隔。</li>
</ul>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>此关键字禁用备用字体。</dd>
 <dt><code>historical-forms</code></dt>
 <dd>此关键字启用历史类型-过去常见但今天不常见的字体。 它对应于OpenType值 <code>hist</code>.</dd>
 <dt><code><a name="stylistic()"></a>stylistic()</code></dt>
 <dd>此函数可以为个别字体启用字体样式替换。该参数是特定于字体映射到数字的名称。 它对应于OpenType值 <code>salt</code>，例如<code>salt 2</code>。</dd>
 <dt><code><a name="styleset()"></a>styleset()</code></dt>
 <dd>此函数可以对字符集启用字体样式替换。 该参数是特定于字体映射到数字的名称。它对应于OpenType的值 <code>ssXY</code>， 例如 <code>ss02</code>。</dd>
 <dt><code><a name="character-variant()"></a>character-variant()</code></dt>
 <dd>此函数启用字符的特定样式替代。 它与styleset（）类似，但是不会为一组字符创建连贯的字形； 单个字符将具有独立且不一定一致的样式。 该参数是映射到数字的特定于字体的名称。 它对应于OpenType值 <code>cvXY</code>， 例如<code>cv02</code>。</dd>
 <dt><code><a name="swash()"></a>swash()</code></dt>
 <dd>此函数启用斜字体。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 <code>swsh</code> 和 <code>cswh</code>，例如<code>swsh 2</code> 和<code>cswh 2</code>。</dd>
 <dt><code><a name="ornaments()"></a>ornaments()</code></dt>
 <dd>此函数可启用装饰物，例如 <a href="http://en.wikipedia.org/wiki/Fleuron_%28typography%29">fleurons</a> 与其他dingbat字形。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值 <code>ornm</code>，例如 <code>ornm 2</code>。
 <div class="note"><strong>注意:</strong> 为了保留文本语义，字体设计师应该包括与Unicode dingbat字符不匹配的装饰，作为项目符号字符（U + 2022）的装饰变体。请注意，某些现有字体不遵循此建议。</div>
 </dd>
 <dt><code><a name="annotation()"></a>annotation()</code></dt>
 <dd>此函数支持注释, 如带圆圈的数字或倒置的字符。 该参数是特定于字体映射到数字的名称。 它对应于OpenType值<code>nalt</code>，例如 <code>nalt 2</code>。</dd>
</dl>

<h2 id="正式定义">正式定义</h2>

<p>{{CSSInfo}}</p>

<h2 id="正式语法">正式语法</h2>

{{csssyntax}}

<h2 id="示例">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;p&gt;Firefox rocks!&lt;/p&gt;
&lt;p class="variant"&gt;Firefox rocks!&lt;/p&gt;
</pre>

<h3 id="CSS"><span class="pun">CSS</span></h3>

<pre class="brush: css notranslate">@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);
}</pre>

<h3 id="结果">结果</h3>

<div class="note">
<p><strong>注意:</strong> 你需要安装 OpenType 字体 <em>Leitura Display Swashes</em> 才能使这个例子正常运行。您可以找到一些免费版本进行测试，例如从 <a href="http://fontsgeek.com/fonts/Leitura-Display-Swashes">fontsgeek.com</a>.</p>
</div>

<p>{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/font-variant-alternates') }}</p>

<h2 id="规范">规范</h2>

<p>不属于任何标准。</p>

<h2 id="浏览器兼容">浏览器兼容</h2>


<p>{{Compat("css.properties.font-variant-alternates")}}</p>