Webfont 渲染问题：浏览器似乎对大小和位置感到困惑

Question

我在一个项目中使用了两种网络字体。其中一个有我以前从未遇到过的渲染问题。另一个按预期工作。

一般来说，问题似乎是浏览器很难确定文本的大小和位置。

在 Safari 中，我注意到：

• 选择文本时，选择框呈现的高度高于呈现的文本。
• 单击 link 时，我必须单击高于实际文本的位置。

在Chrome中，我注意到：

• 选择文本时，选择框呈现的方式比呈现的文本大。
• 单击 link 时，我必须单击高于实际文本的位置。

在 Firefox 中，这个问题最不引人注意。没有明显的位置变化。不过，文本的叠加层似乎有点小/下移了。

有人知道这里发生了什么吗？为什么只针对这种特定字体？

---

在 Safari 中选择第一行而非第三行

选择 Chrome

中的第一行

在 Firefox 中选择第一行

Answer 1

我通过联系有问题的字体的创建者找到了我自己的问题的答案。所以万一以后有人偶然发现这个问题...

奇怪的行为是由一些超出通常范围的特殊字符引起的。虽然我从不使用这些字符，但今天的大多数浏览器似乎都是根据字体中最大的字符而不是使用的最大字符来确定行高的。