font-variant-ligatures
======================

**`font-variant-ligatures`** 属性控制着其所应用元素文本的 ligatures 与 contextual forms 。会使文字最终的表现形式更加统一。

尝试一下
----

Syntax
------


```css
/\* Keyword values \*/
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/

/\* Global values \*/
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: unset;
```


`font-variant-ligatures`取值为下列关键字之一。

### Values

`normal`

默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本。

`none`

不使用任何连字，包括常规的形式

*<common-lig-values>*

These values control the most common ligatures, like for `fi`, `ffi`, `th` or similar. They correspond to the OpenType values `liga` and `clig`. Two values are possible:

* `common-ligatures` activating these ligatures. Note that the keyword `normal` activates these ligatures.
* `no-common-ligatures` deactivating these ligatures.

*<discretionary-lig-values>*

These values control specific ligatures, specific to the font and defined by the type designer. They correspond to the OpenType values `dlig`. Two values are possible:

* `discretionary-ligatures` activating these ligatures.
* `no-discretionary-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*<historical-lig-values>*

These values control the ligatures used historically, in old books, like the German tz digraph being displayed as ꜩ. They correspond to the OpenType values `hlig`. Two values are possible:

* `historical-ligatures` activating these ligatures.
* `no-historical-ligatures` deactivating the ligatures. Note that the keyword `normal` usually deactivates these ligatures.

*<contextual-alt-values>*

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 `calt`. Two values are possible:

* `contextual` specifies that the contextual alternates are to be used. Note that the keyword `normal` usually activates these ligatures too.
* `no-contextual` prevents their use.

Formal definition
-----------------

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

Formal syntax
-------------
```

font-variant-ligatures =   
  normal                                              |  
  none                                                |  
  [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]    
  
<common-lig-values> =   
  common-ligatures     |  
  no-common-ligatures    
  
<discretionary-lig-values> =   
  discretionary-ligatures     |  
  no-discretionary-ligatures    
  
<historical-lig-values> =   
  historical-ligatures     |  
  no-historical-ligatures    
  
<contextual-alt-values> =   
  contextual     |  
  no-contextual    
  
```

示例
--

### Setting font ligatures and contextual forms

#### HTML


```html
<link href="//fonts.googleapis.com/css?family=Lora" rel="stylesheet" />
<p class="normal">
  normal<br />
  if fi ff tf ft jf fj
</p>
<p class="none">
  none<br />
  if fi ff tf ft jf fj
</p>
<p class="common-ligatures">
  common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-common-ligatures">
  no-common-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="discretionary-ligatures">
  discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-discretionary-ligatures">
  no-discretionary-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="historical-ligatures">
  historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="no-historical-ligatures">
  no-historical-ligatures<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="no-contextual">
  no-contextual<br />
  if fi ff tf ft jf fj
</p>
<p class="contextual">
  contextual<br />
  if fi ff tf ft jf fj
</p>
```


#### CSS


```css
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;
}
```


#### 结果

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-ligatures-prop |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.