Chrome浏览器中的阿拉伯变音符号颜色已断开字母

Question

我正在尝试使用带格式的阿拉伯文字为一些字母和变音符号上色。可以像Firefox一样正常工作。但是在Chrome中，某些字母和变音符号是断开的字母。有什么解决办法吗？

这是格式化的阿拉伯文本。

    <b>
 <font size="36">
   <font color="blue">ٱلَّذِينَ يُؤْمِنُونَ بِ<font color="green">ٱ</font>لْغَيْبِ وَيُقِيمُونَ <font color="gray">ٱ</font><font color="orange">ل</font>صَّلَ<font color="pink">و</font><font color="Olive">ٲ</font>ةَ وَمِ<font color="Teal">مّ</span>َا رَزَ<font color="Purple">قْ</font>نَ<font color="Olive">ـٰ</font>هُمْ يُ<font color="Navy">نف</span>ِق<font color="Fuchsia">و</font>نَ</font>
  </font>
</b>

Answer 1

这是Webkit解释由标记分隔的单词的错误。我建议在span元素内容的开头和结尾处插入零宽度的连接符（例如，使用实体引用‍）：

*{
font-size:36px;
}

.firstpart{
color: red;
}

.secondpart{
color: blue;
}

<span class="firstpart">وفّ&zwj;</span>&zwj;<span class="secondpart">&zwj;قك الله أخي الفاضل لما يحبّه ويرضاه</span>

您可以访问this link来深入了解此问题和类似问题，并了解使用不同浏览器可能遇到的问题。