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

问题描述

我在一个项目中使用了两个webfonts。其中之一存在我从未遇到过的渲染问题。另一个按预期工作。

通常,问题似乎在于浏览器很难确定文本的大小和位置。

在Safari中,我注意到:

  • 选择文本时,选择框的呈现要高于文本的呈现。
  • 单击链接时,我必须单击高于实际文本的位置。

在Chrome中,我注意到:

  • 选择文本时,选择框的渲染方式远大于文本的渲染方式。
  • 单击链接时,我必须单击高于实际文本的位置。

在Firefox中,该问题最不明显。位置没有明显变化。文字的叠加似乎有点小/向下移动。

有人对这里发生的事情有任何线索吗?为什么只选择这种特定字体?


Trying to select the first line in Safari

在Safari中选择第一行而不是第三行

enter image description here

在Chrome中选择第一行

enter image description here

在Firefox中选择第一行

解决方法

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

奇怪的行为是由一些特殊字符引起的,这些特殊字符超出了通常的边界范围。尽管我从未使用过这些字符,但当今大多数浏览器似乎都是根据字体中最大的字符而不是所使用的最大字符来确定行高。