如何用CSS跨浏览器控制阿拉伯语文本的连字与渲染效果？

以及

以上两张图是完全相同的阿拉伯语文本、使用完全相同字体的渲染示例，分别在Chrome和Firefox中呈现出不同效果。其中Firefox的渲染是阿拉伯语文本ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ的最准确版本，正确运用了阿拉伯文的连字规则。

既然Firefox能正确渲染，说明这不是字体问题。因此想请教：能否通过CSS控制/强制阿拉伯文脚本的连字/呈现效果，让它在不同浏览器（尤其是Chrome）中都能正确显示？

示例代码 #

HTML

<div lang="ar" class="some_arabic_wrapper">ٱلرَّحۡمَٰنِ ٱلرَّحِيمِ</div>

CSS

.some_arabic_wrapper {
    direction: rtl;
    font-family: 'MyWebFont';
    font-variant-ligatures: contextual;
    text-rendering: optimizeLegibility;
    /* font-language-override: "ARB"; */
    /* unicode-bidi:initial; */
}

解决方案尝试 #

可以通过以下几种CSS调整来优化Chrome中阿拉伯文的连字渲染：

• 精准控制OpenType字体特性
  直接使用font-feature-settings启用阿拉伯文必需的连字和上下文替代特性，这比font-variant-ligatures更直接：

  font-feature-settings: "calt" on, "liga" on, "dlig" on;
  

  其中calt负责上下文连字逻辑，liga是标准连字，dlig是可选连字，可根据字体支持情况调整。

• 强制启用阿拉伯文语言规则
  取消CSS中font-language-override的注释，强制浏览器按照阿拉伯文规则解析字体：

  font-language-override: "ARB";
  

  这个属性可以确保Chrome不会忽略HTML上的lang="ar"属性，严格遵循阿拉伯文的排版规范。

• 优化文本渲染优先级
  Chrome对text-rendering: optimizeLegibility的处理逻辑和Firefox有差异，尝试明确指定该属性，若无效可适当提升其优先级（优先保证选择器权重足够，尽量少用!important）：

  text-rendering: optimizeLegibility;
  

• 验证字体的OpenType特性完整性
  部分字体虽能在Firefox中正常渲染，但可能缺失Chrome需要的部分OpenType特性。可以使用字体查看工具检查字体是否包含calt、liga、mark（用于元音符号定位）等阿拉伯文必备特性，必要时更换Amiri、Scheherazade New这类专为阿拉伯文优化的开源字体。

另外，Chrome的字体缓存或渲染引擎缓存可能导致修改不生效，测试时可开启开发者工具的“禁用缓存”选项，或清空浏览器缓存后重新加载页面。

内容的提问来源于stack exchange，提问作者imdk4242