为什么我的文本是连接的，发生这种情况时它叫什么？答案

【问题标题】：Why is my text connected, and what is it called when this happens?为什么我的文本是连接的，发生这种情况时它叫什么？
【发布时间】：2019-06-27 08:55:54
【问题描述】：

我的字体会自动执行此操作。这个叫什么？我如何用其他文本重现这个？我该如何摆脱它？

【问题讨论】：

字体好像是这样设计的

标签： html css

【解决方案1】：

是的，这是一个连字（将“c”连接到“h”），它们因字体而异（有些字体很多，有些字体很少或没有）。您可以使用 css font-feature-settings 直接禁用/启用连字

font-feature-settings: "liga" 0; /* disabled */
font-feature-settings: "liga" 1; /* enabled */

@import url('https://fonts.googleapis.com/css?family=Cookie|Dancing+Script&display=swap');
span {
  font-family: 'Dancing Script', cursive;
  font-size: 75px;
}

span.other {
  font-family: 'Cookie', cursive;
}

.with {
  font-feature-settings: "liga" 1;
}

.without {
  font-feature-settings: "liga" 0;
}

<span class="with">
or ff
</span><br>
<span class="without">
or ff
</span>
<br>
<span class="other with">
or ff
</span><br>
<span class="other without">
or ff
</span>

还有一个 css 属性 text-rendering 可以控制何时使用或不使用连字。

【讨论】：

【解决方案2】：

这称为 typographic ligature,，内置于某些字体中。

具体来说，fi 和 fl 连字在 Type 1 和 TrueType 字体中是标准的，但在许多新的 OpenType 字体中可以找到更广泛的标准连字。

您可以通过导入此类字体，添加链接到该字体的 font-face CSS 规则，然后使用 font-family 引用该特定字体来为其他文本添加样式：

@font-face {
  font-family: fancyFont;
  src: url(YOUR_FONT.woff);
}

p {
  font-family: "fancyFont", serif;
}

【讨论】：