保持字体连字并缩小字母间距

Question

我使用的字体有可爱的连字：

但是当我收紧字母间距时，例如：

letter-spacing: -0.01em;

连字不再起作用，并且使用单个字符 (f f i)：

我有以下内容：

font-variant-ligatures: common-ligatures;

在桌面出版中，即使字母间距/字距调整为负，连字仍会显示。有没有办法在网页上保留连字？

Answer 1

当然，浏览器可以为字母间距/跟踪的相当微妙的变化添加一定的阈值以禁用连字 - 就像设计应用程序（例如 Illustrator、Indesign）一样。

另一方面 - 我不怪他们：
您可能知道，连字是附加的（手动设计的）字形，用于替换某些字符组合。
因此，防止奇怪的文本渲染的安全方法是在跟踪偏离标准时禁用连字。

在您的情况下，您可以将所有与连字相关的字符组合包装在 span 元素中以保留连字。

这是一个 JS 帮助器示例：

// add font-family classes
let ligatures = ["ffi", "ft", "fi", "ff"];
let ligatureEls = document.querySelectorAll(".findLigatures");
ligatureEls.forEach((el) => {
  highlightText(el, ligatures, "highlight ligature");
});

function highlightText(el, substrings, classNames = "highlight") {
  substrings.forEach((substring) => {
    let regex = new RegExp(`(${substring})`, "gi");
    el.childNodes.forEach((childNode) => {
      if (childNode.nodeValue && regex.test(childNode.nodeValue)) {
        childNode.parentNode.innerHTML = childNode.parentNode.innerHTML.replace(
          regex,
          `<span class="${classNames}">${substring}</span>`
        );
      }
    });
  });
}

body {
  font-size: 5em;
  font-family: georgia;
  font-family: 'Cormorant Garamond', serif;
}

p {
  margin: 0;
}

.narrow {
  letter-spacing: -0.08em;
}

.wide {
  letter-spacing: 0.08em;
}

.ligature {
  letter-spacing: 0;
}

.highlight {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.1em;
}

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap" rel="stylesheet">

<p class="narrow findLigatures">Office Often Oficial Offset</p>
<p class="wide findLigatures">Office Often Oficial Offset</p>

我们基本上使用突出显示辅助函数来查找某些字符组合（在数组中指定），并将这些文本节点包装在具有额外类名的

<span>

元素中。这样我们就可以“禁用”自定义

letter-spacing

属性（将其重置为 0），从而保留连字渲染。