如何在 Chrome 和 Windows 和 Android OS 下的 Edge 浏览器中正确定位阿拉伯字体所有连字上方和下方的变音符号?

How to Properly Position Diacritical Marks above and below All Ligatures of an Arabic Font in Chrome and Edge Browsers under Windows and Android OS?

你能帮我解决这个问题吗?

存在阿拉伯字体渲染问题,起初我以为是我当前设计的字体有问题。但是,我现在认为它源于浏览器,因为同样的问题出现在阿拉伯排版字体 (arabtype.ttf) 中,该字体已经内置到我的计算机 Windows 10 Home OS.[=16= 中]

此外,此问题仅在 Windows OS 和 Android 下的 Edge 和 Chrome 浏览器中发生,但在 Firefox 中不会发生。

此外,在IOS下没有问题,即使在Chrome或Edge下也没有问题。

文本在 MS Word 中正确呈现。

下图显示了 Windows 提供的阿拉伯排版字体的文本,描述了此问题的一个示例。

font rendering issue

问题: 理想情况下,由 2 个、3 个或更多字符组成的连字字形在组合连字的上方或下方按顺序放置变音标记。此示例中的连字是两个阿拉伯字母 Jeem 和 Heh 的组合,其中 Fatha 和 Damma 变音符号仅聚集在 Heh 之上,而不是它们指定的顺序。

您可以在任何 OS.

下的任何浏览器中尝试测试网页上的文本:https://www.colorfulquran.com/fonts/ProblemOfTheMarksAboveLigatures.html

这个问题有点奇怪!如附图所示,一个段落中的一串文本出现了两次相同的连字。其中一个出现问题,另一个没有!

我认为问题出在我设计的字体上。我已经尝试修复它三个多月了。最后,我想通过重新排序 GSUB 查找来解决问题。不幸的是,虽然有问题的连字会正确呈现,但在重新排序之前正确生成的其他连字中会再次出现相同的情况!

你能帮我解决这个问题吗?比如在字体设计上有什么我应该做的吗?或者网页的 HTML/CSS 设计中有什么?

我怎样才能让这种连字和变音符号密集的阿拉伯语文本在所有操作系统下的所有浏览器中正确呈现?

谢谢。

这个post是一个follow-up。

我将我的原始问题发送到 Google Chrome 的“报告问题”和 MS Edge 的“发送反馈”。几天后,我注意到问题已从 Chrome 中消失。他们似乎已经修好了。谢谢,Google。但是它仍然显示在Edge中。

另一方面,由于 post 在这里提出问题,我找到了解决该问题的方法,尽管没有人回应。在准备原始问题中链接的测试网页时,我首先想到通过将它们加粗来强调有问题的词。但后来我把它们变回常规,因为在将它们设为粗体后,它们呈现正确,这违背了这个问题的目的。使用 HTML 粗体标记似乎重置了浏览器的字体渲染引擎。因此,作为一种解决方法,我现在将每两个单词之间的每个 space 都变成粗体,这当然不会显示,因为 space 字形是空的。此解决方法似乎适用于所有浏览器,包括 Edge。

谢谢。