font-variant-ligatures

**font-variant-ligatures** CSS 属性控制在它应用到的元素的文本内容中使用哪些连字 和 上下文形式。 这会导致生成的文本中出现更和谐的形式。

试一试

语法

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> */

/* Two keyword values */
font-variant-ligatures: no-contextual common-ligatures;

/* Four keyword values */
font-variant-ligatures: common-ligatures no-discretionary-ligatures
  historical-ligatures contextual;

/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

font-variant-ligatures 属性被指定为 normal、none 或下面列出的一个或多个其他值类型。 多个值之间用空格分隔。

Values

normal

此关键字激活正确渲染所需的一般连字和上下文形式。 激活的连字和形式取决于字体、语言和脚本类型。 这是默认值。

none

此关键字指定所有连字和上下文形式都被禁用，即使是一般的连字和形式。

<common-lig-values>

这些值控制最常见的连字，例如 fi、ffi、th 或类似的连字。 它们对应于 OpenType 值 liga 和 clig。 两个值是可能的

  • common-ligatures 激活这些连字。 请注意，关键字 normal 会激活这些连字。
  • no-common-ligatures 禁用这些连字。
<discretionary-lig-values>

这些值控制特定连字，这些连字特定于字体，并且由字体设计师定义。 它们对应于 OpenType 值 dlig。 两个值是可能的

  • discretionary-ligatures 激活这些连字。
  • no-discretionary-ligatures 禁用连字。 请注意，关键字 normal 通常会禁用这些连字。
<historical-lig-values>

这些值控制历史上使用的连字，在旧书中，例如德语 tz 二合字母显示为 ꜩ。 它们对应于 OpenType 值 hlig。 两个值是可能的

  • historical-ligatures 激活这些连字。
  • no-historical-ligatures 禁用连字。 请注意，关键字 normal 通常会禁用这些连字。
<contextual-alt-values>

这些值控制字母是否适应它们的上下文，即它们是否适应周围的字母。 这些值对应于 OpenType 值 calt。 两个值是可能的

  • contextual 指定使用上下文备用字形。 请注意，关键字 normal 通常也会激活这些连字。
  • no-contextual 阻止它们的使用。

正式定义

Initial valuenormal
Applies to所有元素和文本。 它也适用于 ::first-letter 和 ::first-line.
Inheritedyes
Computed valueas specified
Animation typediscrete

正式语法

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>

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

Result

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见