font-variant-ligatures

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

font-variant-ligatures 属性控制着其所应用元素文本的 ligaturescontextual 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
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant-ligatures
common-ligatures
contextual
discretionary-ligatures
historical-ligatures
no-common-ligatures
no-contextual
no-discretionary-ligatures
no-historical-ligatures
none
normal

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.