CSS font-variant-ligatures 属性-之路教程

连字的类型

CSS 可以识别多种类型的连字。
这些连字符合广泛使用的 OpenType 格式。
我们将通过每一个。

常见的连字

这些连字主要用于字符相互“碰撞”时。
这使得文本阅读起来更难和不舒服。
例如，我们可以采用小写“i”和“f”字母的组合。
启用连字会将这两个字母连接在一起，使它们更易于阅读。
默认情况下，CSS 启用常见连字。
但是我们可以像这样手动启用或者禁用它们：

/* Enable common ligatures */
font-variant-ligatures: common-ligatures;

/* Disable common ligatures */
font-variant-ligatures: no-common-ligatures;

任意连字

任意连字，也称为装饰连字，更多地用作装饰。
事实上，它们并不是为阅读而设计的。
默认情况下，这些连字被 CSS 禁用，并且是另外的可选。
这意味着我们可以在需要时启用它们。
启用或者禁用自由连字是这样完成的：

/* Enable discretionary ligatures */
font-variant-ligatures: discretionary-ligatures;

/* Disable discretionary ligatures */
font-variant-ligatures: no-discretionary-ligatures;

历史连字

历史连字也是为装饰目的而设计的。
我们可以使用以下代码启用或者禁用它们：

/* Enable historical ligatures */
font-variant-ligatures: historical-ligatures;

/* Disable historical ligatures */
font-variant-ligatures: no-historical-ligatures;

CSS font-variant-ligatures 属性

font-variant-ligatures 属性控制产生更协调形式的连字和上下文形式。

此属性由以下值指定：

normal
none
<common-lig-values>
<discretionary-lig-values>
<historical-lig-values>
<contextual-alt-values>

初始值	normal
应用于	所有元素。它还适用于伪元素::first-letter 和 ::first-line。
继承	可继承
可动画的	无效
版本	CSS3.
DOM 语法	object.style.fontvariantLigatures = "normal";

语法

font-variant-ligatures: normal | none |  <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values>;

font-variant-ligatures 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div {
        font-family: Lora, serif;
        font-size: 35vw;
      }
      .gray {
        font-variant-ligatures: no-common-ligatures;
        color: #ccc;
      }
      .blue {
        font-variant-ligatures: common-ligatures;
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-ligatures 属性示例</h2>
    <div>
      <span class="gray">fi</span>
      <span class="blue">fi</span>
    </div>
  </body>
</html>

上下文替代

上下文替代对于提高易读性很有用。
它们为构成连字的字符提供了更好的连接行为。
上下文替代在连接脚本的情况下特别有用。
由于它们，笔画从一个字符正确连接到另一个字符，保持连续流动。

CSS font-variant-ligatures 属性值说明

值	描述
normal	形式和切断的激活取决于字体，语言和脚本的类型。这是此属性的默认值。
none	禁用所有的韧带和上下文形式。
<common-lig-values>	控制所有的连字。
<discretionary-lig-values>	控制特定的连字。
<historical-lig-values>	控制旧书中使用的连字。
<contextual-alt-values>	控制字母的调整到他们的上下文。
initial	它使属性使用其默认值。
inherit	它从其父母元素继承了属性。

日期：2020-06-02 22:14:26 来源：oir作者：oir

←CSS font-variant-caps 属性

CSS font-variant-numeric 属性→