initial commit

1 files changed, 110 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/font-variant-alternates/index.html b/files/zh-cn/web/css/font-variant-alternates/index.html
new file mode 100644
index 0000000000..bc4fd876ce
--- /dev/null
+++ b/files/zh-cn/web/css/font-variant-alternates/index.html
@@ -0,0 +1,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>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<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>