我用来将 "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 的许多字体中也会发生同样的情况，这是由于弯曲的 f 与 i 上的点碰撞的问题，如果正常的话使用了两个角色的外观。

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

接下来可能发生的是浏览器无法找到或无法显示这种特殊的连字字形，因此会显示其他内容 – 显然是左括号。

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

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

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

但是，另一个令人满意的修复可能是完全阻止字体使用连字。字母之间可能有不需要的 'collisions'，但这比文本中出现的随机括号要好，如果没有其他方法的话！

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

Answer 2

在 css 中使用 font-variant-ligatures: no-common-ligatures; 有效。

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

The font I use to change "find" to "(nd". Anyone know why?

html

css

fonts

reactjs