Html 爱奥尼亚的阿拉伯文-改变一个字母的颜色会改变格式

当我在

.html数据

中更改一个字母的颜色时，我的单词会比正常单词长（请看图片）。正常输出为输出2

输出1：如果我这样做，单词会变长。当我添加该行以连接字母时会发生：

<button>
    <span style="font-size: 30px">مَـ<span style="color:red">ـرَ</span>جَ</span> 
</button>

مَــرَجَ 

输出3：当我没有添加行来连接它们时，就会发生这种情况。他们没有加入，但必须加入：

<button>
    <span style="font-size: 30px">مَ<span style="color:red">رَ</span>جَ</span>
</button>

مَرَجَ

当我改变一个字母的颜色时，我能做些什么来保持单词的正常长度

---

谢谢大家的帮助

试着用

按钮span{字母间距：-1px；}

谢谢！我试过了，但是它不影响用线条连接的字母。你能发布2的html吗？谢谢大家！我找到了解决办法：））