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>行。

但是，在上图中，有两个感觉很像明显的问题。

首先，文本似乎在视觉上没有正确对齐。感觉混乱和锯齿，而不是具有清晰的基线。在某些部分中，单词或字符的主要水平伸展甚至在水平基线的“平均”位置上方或下方。

第二，我不擅长阿拉伯语atm，但似乎有些字符有些许移动，以免以一种干净的方式草书连接，就像渲染算法在某些情况下搞砸了。

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

如果完全相关，我正在使用wkhtmltopdf从HTML生成PDF，即该图像是什么。

Answer 1

我认为问题出在转换（wkhtmltopdf）中，而不是CSS中。为什么不使用Chrome之类的浏览器将HTML转换为PDF？它更适合阿拉伯文本。阿拉伯文字通常比常规文字需要更高的行高，例如1.6

body {
  line-height: 1.6;
}

在旁注中，我建议使用Vazir字体。它可以最佳地呈现包含变音符号的文本。

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

1 个答案: