要在网页标签中禁用某一处连字，请将对应字母包在一个行内 span 中，并在其中禁用相关连字特性。其他文本保留原有设置。CSS 没有通用开关可以在整个字体中禁用某个指定连字。MDN 的连字控制针对的是特性类别，而非单个替换。

本指南适用于使用 Mac 编辑网页 HTML 和 CSS 的用户。具体任务是在合成标签 fine flake office fine 中，将第一个 fi 单独处理，同时让其余文本保留连字。通过一个小型本地测试，可以直观地看出更改单个位置与更改整个特性的区别。

CSS 可以选择性禁用什么？

一个连字特性可以包含多个替换。禁用 liga 意味着为受影响的文本禁用该特性，并不意味着选中某一对特定字母。同样，font-variant-ligatures: no-common-ligatures 会通过 liga 和 clig 控制常用连字。实际替换取决于所用字体。MDN：font-variant-ligatures

关键在于区分设置的适用范围与设置控制的字体特性。即使该特性包含许多连字，你仍可以通过标记将设置范围缩小到两个字母。这样就能按出现位置变通处理，而无需在整个字体范围内排除某个连字。

目标结果 合适的方法 条件
分开某一处 fi 将该处包起来，并在局部禁用其特性 你可以编辑标记
删除可选连字，同时保留常用连字 在目标元素上使用 no-discretionary-ligatures 不需要的替换属于 dlig
删除所有 fi，同时保留其他所有常用连字 如果有文档说明的字体专用特性，则使用该特性 字体必须提供所需的控制方式
在无法编辑的应用中更改某一处 查找该应用有文档说明的字符级格式设置 网页 CSS 无法说明桌面应用支持哪些功能

对于其支持的类别，优先使用 font-variant-ligatures。MDN 建议在可用时使用更高级别的字体属性；对于其他情况，font-feature-settings 可用于访问较低级别的 OpenType 特性。编写 font-feature-settings: \"liga\" off 并不会增加针对特定字母对的控制。MDN：font-feature-settings

在 Mac 上进行本地对比

先使用独立文件进行测试，这样就能在不受页面其他样式影响的情况下比较结果。在 TextEdit 中选择 File > New，然后选择 Format > Make Plain Text。输入下方完整示例，将其保存为 ligature-demo.html，如果出现提示，则选择 Use .html。这是 Apple 文档中介绍的在 TextEdit 中创建 HTML 文件的步骤。Apple：在 Mac 上使用 TextEdit 处理 HTML 文稿

在浏览器中打开保存的文件。示例使用本机可用的字体，不需要库或下载。示例中的字体列表仅供参考：只有所选字体包含相关连字时，才能看到差异。测试结果以浏览器渲染为准，不预设任何特定字形外观。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ligature comparison</title>
  <style>
    body {
      margin: 2rem;
      color: #222;
      background: #fff;
      font-family: system-ui, sans-serif;
    }

    main {
      max-width: 42rem;
    }

    .sample {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 2.5rem;
      line-height: 1.5;
      letter-spacing: normal;
      font-variant-ligatures: common-ligatures;
    }

    .separate-pair,
    .all-common-off {
      font-variant-ligatures: no-common-ligatures;
    }
  </style>
</head>
<body>
  <main>
    <h2>Baseline</h2>
    <p class="sample">fine flake office fine</p>

    <h2>First pair separated</h2>
    <p class="sample"><span class="separate-pair">fi</span>ne flake office fine</p>

    <h2>All common ligatures disabled</h2>
    <p class="sample all-common-off">fine flake office fine</p>
  </main>
</body>
</html>

中间一行的 span 包含目标 fi 的两个字母。该行其余部分沿用常用连字设置。对于这种纯样式分组，span 很合适：WHATWG 将其定义为一种表示其子内容、但自身不赋予额外含义的元素。WHATWG：span 元素

分三步查看对比：

  1. 比较基准行与中间行中的第一个 fine。观察字母形状，而不只是总宽度。
  2. 比较这两行中的 flake、office 和最后一个 fine。它们位于例外范围之外，应该保留原有的特性设置。
  3. 将底部一行与其他行比较。这是更大范围的对照：该行的常用连字在整行范围内都被禁用了。

如果三行看起来完全相同，这次对比就无法得出结论。将示例字体换成你实际打算使用的字体，并选择该字体文档中列出的连字字母序列。CSS 声明无法展示所选字体不支持的替换。

应用例外，同时避免影响文本流

对于短标签，直接用 span 包住要分开的完整字母序列。像示例中 fi 和 ne 那样，让它前后的字符在源代码中保持相邻。不要仅仅为了让标记更易读，就在单词内部插入空格或换行。

span 需要包含特性设置变更。仅将一个字母放在一个没有其他样式的 span 中，并不能可靠地打断连字：W3C 的文本规范要求，在没有生效的格式变化时，字形塑造应跨越行内边界继续进行。规范还定义了边距、边框、内边距或其他格式会打断字形塑造的情形。W3C：跨元素边界的字形塑造

将此例外保留为普通行内 span。添加 inline-block、间距或布局容器会引入这项任务并不需要的其他布局决策。应用排版设置后，缩窄浏览器窗口，并检查标签在预期容器中的显示效果。请留意换行是否发生变化，因为字形选择不同可能会改变文本占用的空间。

对于较长的字母序列，应明确确定预期边界。如果不需要的替换涉及 ffi，那么只包住 fi 也会在更大的字母序列内部创建一个格式边界。请测试整个单词及其相邻字母，不要假定所有重叠的替换都会彼此独立地生效。

将示例用于现有页面时，请编辑源代码或组件中的相关标签。不要只为了添加一个例外，就根据页面上可见的文本重建整个段落；保留现有链接、强调格式和元素结构。本示例有意只处理一个已知位置，不尝试在任意页面中自动替换。

如果连字仍然存在，或其他连字消失，该怎么办？

将对比用作诊断流程，先不要立即添加更多覆盖设置。

首先，检查特性类别。 示例针对常用连字。如果字体文档将不需要的替换归入 dlig，则改为对例外使用 no-discretionary-ligatures。上下文替换可能涉及 calt，并由 no-contextual 控制；此设置可能会影响所选文本中的其他上下文形式。MDN 对特性类别的定义

接下来，检查是否存在相互竞争的设置。 现有的 font-feature-settings 声明可能会覆盖 font-variant-ligatures 所暗示的特性选择。W3C 规定，在特性解析过程中，低级别特性设置会在之后应用。在判断 span 方法不受支持之前，请先检查该声明。W3C：字体特性与变体解析

然后，检查作用范围。 如果其他单词中的连字也消失了，请确认例外类只添加到了目标 span 上。应用于段落或其容器的设置会影响范围大得多的文本。在本地示例中，底部一行就是有意展示这种更广的效果。

最后，区分可选排版与必要的字形塑造。 font-variant-ligatures: none 的作用范围比这项任务所需的更广，而且其禁用控制不包括必要连字。W3C 明确规定，该属性仍会保留必要连字。W3C：连字

如果目标是在所有地方删除某种连字，就必须对每个目标位置应用局部 span 方法。字体专用特性可能是更简洁的解决方案，但其标签和作用必须以该字体的文档为准。不要假设不同字体中的样式集编号含义相同。

字形塑造库能提供更精细的控制吗？

HarfBuzz 通过 hb_feature_t 暴露特性范围：一个特性包含标签、值、包含起始位置和不包含结束位置，并通过簇值表示。这让调用该字形塑造库的应用能够将特性设置应用于有限范围。但该范围仍然是针对某项特性的范围，而不是适用于所有情况的指定连字选择器。HarfBuzz：hb_feature_t

该 API 与普通页面 CSS 属于不同层级。HarfBuzz 的文档机制会将特性请求传递给 hb_shape()。其示例介绍的是字形塑造缓冲区和字体查找规则，而不是为浏览器样式表添加选项。对于这项 Mac 网页标签任务，引入自定义字形塑造流程会增加超出行内例外所需的工作。HarfBuzz：OpenType 特性

最后检查目标字母对、周围的连字，以及标签在实际显示宽度下的效果。保留最精简且有效的例外：将完整的不需要字母序列放在一个 span 中，在其中禁用相应特性，并让其余文本保留预期设置。

来源