initial commit

1 files changed, 211 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/font-variant-ligatures/index.html b/files/zh-cn/web/css/font-variant-ligatures/index.html
new file mode 100644
index 0000000000..dea2c73f30
--- /dev/null
+++ b/files/zh-cn/web/css/font-variant-ligatures/index.html
@@ -0,0 +1,211 @@
+---
+title: font-variant-ligatures
+slug: Web/CSS/font-variant-ligatures
+translation_of: Web/CSS/font-variant-ligatures
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary"><strong><code>font-variant-ligatures</code></strong> 属性控制着其所应用元素文本的 {{Glossary("ligature", "ligatures")}} 与 {{Glossary("contextual forms")}} 。</span> 会使文字最终的表现形式更加统一。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-variant-ligatures.html")}}</div>
+
+<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* Keyword values */
+font-variant-ligatures: normal;
+font-variant-ligatures: none;
+font-variant-ligatures: common-ligatures;           /* &lt;common-lig-values&gt; */
+font-variant-ligatures: no-common-ligatures;        /* &lt;common-lig-values&gt; */
+font-variant-ligatures: discretionary-ligatures;    /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: no-discretionary-ligatures; /* &lt;discretionary-lig-values&gt; */
+font-variant-ligatures: historical-ligatures;       /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: no-historical-ligatures;    /* &lt;historical-lig-values&gt; */
+font-variant-ligatures: contextual;                 /* &lt;contextual-alt-values&gt; */
+font-variant-ligatures: no-contextual;              /* &lt;contextual-alt-values&gt; */
+
+/* Global values */
+font-variant-ligatures: inherit;
+font-variant-ligatures: initial;
+font-variant-ligatures: unset;
+</pre>
+
+<p><code>font-variant-ligatures</code>取值为下列关键字之一。</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本。</dd>
+ <dt><code>none</code></dt>
+ <dd>不使用任何连字，包括常规的形式</dd>
+ <dt><em>&lt;common-lig-values&gt;</em></dt>
+ <dd>These values control the most common ligatures, like for <code>fi</code>, <code>ffi</code>, <code>th</code> or similar. They correspond to the OpenType values <code>liga</code> and <code>clig</code>. Two values are possible:
+ <ul>
+  <li><code>common-ligatures</code> activating these ligatures. Note that the keyword <code>normal</code> activates these ligatures.</li>
+  <li><code>no-common-ligatures</code> deactivating these ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;discretionary-lig-values&gt;</em></dt>
+ <dd>These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values <code>dlig</code>. Two values are possible:
+ <ul>
+  <li><code>discretionary-ligatures</code> activating these ligatures.</li>
+  <li><code>no-discretionary-ligatures</code> deactivating the ligatures. Note that the keyword <code>normal</code> usually deactivates these ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;historical-lig-values&gt;</em></dt>
+ <dd>These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values <code>hlig</code>. Two values are possible:
+ <ul>
+  <li><code>historical-ligatures</code> activating these ligatures.</li>
+  <li><code>no-historical-ligatures</code> deactivating the ligatures. Note that the keyword <code>normal</code> usually deactivates these ligatures.</li>
+ </ul>
+ </dd>
+ <dt><em>&lt;contextual-alt-values&gt;</em></dt>
+ <dd>These values control whether letters adapt to their context—that is, whether they adapt to the surrounding letters. These values correspond to the OpenType values <code>calt</code>. Two values are possible:
+ <ul>
+  <li><code>contextual</code> specifies that the contextual alternates are to be used. Note that the keyword <code>normal</code> usually activates these ligatures too.</li>
+  <li><code>no-contextual</code> prevents their use.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition">Formal definition</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax">Formal syntax</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Setting_font_ligatures_and_contextual_forms">Setting font ligatures and contextual forms</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet"&gt;
+&lt;p class="normal"&gt;
+  normal&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="none"&gt;
+  none&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="common-ligatures"&gt;
+  common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-common-ligatures"&gt;
+  no-common-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="discretionary-ligatures"&gt;
+  discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-discretionary-ligatures"&gt;
+  no-discretionary-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="historical-ligatures"&gt;
+  historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-historical-ligatures"&gt;
+  no-historical-ligatures&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="no-contextual"&gt;
+  no-contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+&lt;p class="contextual"&gt;
+  contextual&lt;br&gt;
+  if fi ff tf ft jf fj
+&lt;/p&gt;
+
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">p {
+  font-family: Lora, serif;
+}
+.normal {
+  font-variant-ligatures: normal;
+}
+
+.none {
+  font-variant-ligatures: none;
+}
+
+.common-ligatures {
+  font-variant-ligatures: common-ligatures;
+}
+
+.no-common-ligatures {
+  font-variant-ligatures: no-common-ligatures;
+}
+
+.discretionary-ligatures {
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+.no-discretionary-ligatures {
+  font-variant-ligatures: no-discretionary-ligatures;
+}
+
+.historical-ligatures {
+  font-variant-ligatures: historical-ligatures;
+}
+
+.no-historical-ligatures {
+  font-variant-ligatures: no-historical-ligatures;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}
+
+.no-contextual {
+  font-variant-ligatures: no-contextual;
+}
+
+.contextual {
+  font-variant-ligatures: contextual;
+}</pre>
+
+<h4 id="Result">Result</h4>
+
+<p>{{ EmbedLiveSample('Setting_font_ligatures_and_contextual_forms', '', '700', '', 'Web/CSS/font-variant-ligatures') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-ligatures', 'font-variant-ligatures')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.properties.font-variant-ligatures")}}</p>