html - 我用来将 "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 ligature occurs where two or more graphemes or letters are joined as a single glyph. An example is the character æ as used in English, in which the letters a and e are joined.

在 f 的许多字体中也会发生同样的情况。和 i ，由于 flex 的问题 f与 i 上的点相撞如果使用两个字符的正常外观。

(出于同样的原因，组合 fl 、 ff 和 ffl 也经常被连字代替。可以在下面链接的 MDN 文档页面上看到这一点的演示。)

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

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

你使用的字体有连字吗？

每个 fi 都会发生这种情况吗？组合？

fl会发生这种情况吗？组合也是？

至于解决这个问题——如果可以的话，一个正确显示连字的解决方案将是理想的。以某种方式找出为什么这目前不起作用。

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

您可能想看看 font-variant-ligatures MDN docs 上的 CSS 属性寻找实现这一目标的方法。