为什么 Arabic Noto 字体（或其他阿拉伯字体）在 HTML / CSS 中呈现不正确？

Question

我正在使用 Google Noto Sans Serif Font 渲染阿拉伯语文本，它看起来像这样：

请注意对齐如何在某些地方偏离很多。

我的HTML文档很简单，本质上是这样的：

<html>
  <head>
    <meta charset="utf-8">
    <style>
      @font-face {
        font-family: Noto;
        src: url(./arabic.ttf);
      }

      body {
        font-family: "Noto";
      }

      .line {
        white-space: pre;
      }
    </style>
  </head>
  <body dir='rtl'>
    the arabic text...
  </body>
</html>

它所做的只是将 Google Noto 字体添加到 body，然后是一堆 <div class='line'>arabic text...</div> 行。

不过上图中有两个感觉刺眼的问题

首先，文本似乎视觉对齐不正确。感觉混乱和参差不齐，而不是有一个清晰的基线。某些部分单词或字符的主要水平延伸甚至 远高于 或 远低于 水平基线的 "average" 位置。

其次，我不擅长阿拉伯语 atm，但看起来有些字符略有移动，以免以一种干净利落的方式草书连接，就像渲染算法在某些情况下搞砸了。

我只是误解了它的外观，还是这些视觉问题确实存在？如果这些是缺陷，我该如何修复它并通过 CSS 或其他方式使阿拉伯语文本更清晰且水平对齐。

如果完全相关，我正在使用 wkhtmltopdf 从 HTML 生成 PDF，这就是那个图像。

Answer 1

我认为问题出在转换 (wkhtmltopdf) 而不是 CSS。为什么不使用 Chrome 之类的浏览器将 HTML 转换为 PDF？它对阿拉伯语文本效果更好。阿拉伯文本通常需要比正常文本更高的行高，例如1.6

body {
  line-height: 1.6;
}

附带说明一下，我推荐 Vazir 字体。它以最佳方式呈现包含变音符号的文本。

为什么 Arabic Noto 字体（或其他阿拉伯字体）在 HTML / CSS 中呈现不正确？

Why Arabic Noto font (or other Arabic fonts) are rendering incorrectly in HTML / CSS?

html

css

user-interface

fonts

arabic