Hugo静态站点阿拉伯文连字渲染异常求助

核心问题拆解 #

你遇到的“ل”和“ا”未合成“لا”的问题，根源是这个连字属于上下文替代字（calt特性），而非普通连字（liga特性），且当前CSS的letter-spacing设置直接破坏了连字触发条件。

分步排查与解决 #

1. 修正CSS字体特性与间距设置 #

这是最可能的直接解决方法：

• 阿拉伯文“لا”连字依赖calt（上下文替代）和liga（普通连字）双特性，仅开启liga无效；
• 关键：移除或重置letter-spacing，0.33px的字符间距会强制字符分离，完全阻止连字合成。

修改后的.arabic样式：

.arabic {
  font-family: var(--arabic-font-family), sans-serif;
  font-size: var(--arabic-font-perc);
  letter-spacing: 0; /* 必须重置为0，或直接删除该属性 */
  /* 启用完整的连字与上下文替代特性 */
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  /* 或使用更简洁的标准属性 */
  font-variant-ligatures: common-ligatures contextual;
}

2. 排查Hugo构建的文本处理逻辑 #

如果静态HTML测试正常（直接打开你提供的代码修改后能显示连字），则问题出在Hugo构建流程：

• 检查Goldmark渲染配置：若markup.goldmark.renderer.unsafe = false，Hugo会转义特殊字符，可能拆分阿拉伯文连字结构。在config.toml中修改：

  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true # 允许未转义的特殊字符正常渲染
  

• 检查模板过滤器：确保没有使用会破坏文本的过滤器（比如错误使用htmlEscape），阿拉伯文内容应直接输出，或使用safeHTML标记为安全内容。

3. 验证Dart SASS编译是否篡改CSS #

查看Hugo生成的最终HTML源码，确认.arabic类的font-feature-settings等属性是否完整保留：

• 若SASS压缩时误删了字体特性属性，可在SASS中给属性添加!important临时验证，或调整Hugo的SASS编译配置，禁用过度压缩。

4. 优化HTML文本方向识别 #

虽然你的页面是LTR，但阿拉伯文属于RTL文本，给阿拉伯文容器单独设置dir="rtl"，可帮助浏览器正确识别文本排版规则，提升连字触发概率：

<tr class="arabic" dir="rtl">
  <td>بِالْأَثَرِ</td>
</tr>

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