我用来将“find”更改为“（nd”的字体。有人知道为什么吗？

Question

我正在使用 DINPro Medium 字体，由于某种原因，它导致了这种情况。如果重要，文件类型是 .woff。但我在我的 React 网站上使用它。 Picture

这就是我引入字体的方式。

@font-face {
  font-family: "DINPro Medium";
  font-style: normal;
  font-weight: normal;
  src: local("DINPro Medium"), url("DINPro-Medium tr.woff") format("woff");
}

<p class="text">
                I am super passionate about mechanical engineering. I love to
                design and build products, either thats a robot, electric
                skateboard, or a rocket ship. My ultimate dream is to work for
                NASA Jet Propulsion Laboratory. The things they create such as
                the Mars Rover is something I would love to be a part of. On
                this website you can find all of my projects that I have
                completed, my resume, coursework, and contact. I am looking for
                internships in the aerospace and robotics industry. If you have
                any opportunities, please send them my way. Here are some skills
                I am great at:
              </p>

Answer 1

这是一个非常奇怪的问题，我不确定我是否可以完全解释发生了什么以及为什么。但是，错误发生在字符串fi 上的事实表明，问题与连字有关。

---

来自Wikipedia：

连字出现在两个或多个字素或字母连接为一个字形的情况下。一个例子是英文中使用的字符 æ，其中字母 a 和 e 连接在一起。

f 和i 的许多字体也会出现同样的情况，因为如果使用这两个字符的正常外观，弯曲的f 会与i 上的点发生碰撞。

（出于同样的原因，fl、ff 和 ffl 的组合也经常被连字替换。可以在下面链接的 MDN 文档页面上查看演示。）

接下来可能发生的事情是浏览器找不到或无法显示这个特殊的连字字形，因此显示了其他东西——显然是一个左括号。

---

要确认这是问题所在，您可以检查以下几点：

1. 您使用的字体有连字吗？
2. 每个fi 组合都会发生这种情况吗？
3. fl 组合也会出现这种情况吗？

---

至于解决问题 - 如果可以的话，正确显示连字的解决方案将是理想的。以某种方式找出为什么目前无法正常工作。

但是，另一个令人满意的解决方法可能是完全阻止字体使用连字。字母之间可能存在不必要的“冲突”，但这比出现在文本中的随机括号要好，如果没有其他方法的话！

您可能想查看MDN docs 上的font-variant-ligatures CSS 属性以寻找实现此功能的方法。

Answer 2

在 css 中使用 font-variant-ligatures: no-common-ligatures; 工作。