文本对齐:对齐;不使用 wkhtmltopdf

Iur*_*tup 7 html css pdf pdf-generation wkhtmltopdf

再会!

我使用 wkhtmltopdf 库从 HTML 创建 PDF 文档。我根据这个问题使用了svg字体wkhtmltopdf自定义字体字母间距

我使用了自定义字体,由@font-face 添加。对我来说一切都很好,除了一件事: text-align: justify 由于某种原因不起作用。

在 html 中文本按预期对齐,但不是在 PDF 中。

有谁知道如何解决这个问题?

UPD:添加了 CSS 和 HTML 示例

<style type="text/css">
    @font-face{
        font-family:'source_sans_prolight';
        src: url('/font/sourcesanspro-light-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
    }

    @font-face{
        font-family:'Source Sans Regular';
        src: url('/font/sourcesanspro-regular-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
    }
    html, body, p, ul, li, span, img {
        margin: 0px;
        padding: 0px;
    }

    body {
        font-family: "Source Sans Regular", sans-serif;
        text-rendering: geometricPrecision;
    }
    .page {
        width: 729px;
    }
    .block {
        width: 300px;
        float: left;
        margin-right: 40px;
        text-align: justify;
    }
</style>
<div class="page">
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
    <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
</div>
Run Code Online (Sandbox Code Playgroud)

HTML 按预期呈现:http : //i.imgur.com/hE3xYxt.png

在 PDF 中我得到了这个:http : //i.imgur.com/S3KAPqg.png

Ste*_*dru 7

您需要使用固定宽度大小。

body {
    width: 22cm;      
    text-align: justify;
    text-rendering: geometricPrecision;
}
Run Code Online (Sandbox Code Playgroud)

  • 我只需要添加```文本渲染:geometricPrecision;```。 (2认同)

rto*_*ome 1

好的,我已经尝试过这种方法,它对我有用:

<html>
  <head>
    <style type="text/css">
      @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
      @font-face{
        font-family:'source_sans_prolight';
        src: url('/font/sourcesanspro-light-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
      }

      @font-face{
        font-family:'Source Sans Regular';
        src: url('/font/sourcesanspro-regular-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
      }
      html, body, p, ul, li, span, img {
        margin: 0px;
        padding: 0px;
      }

      body {
        font-family: "Source Sans Regular", sans-serif;
        text-rendering: geometricPrecision;
      }
      .page {
        width: 729px;
      }
      .block {
        font-family: 'Source Sans Pro', sans-serif;
        width: 300px;
        float: left;
        margin-right: 40px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum iaculis mollis. Cras in varius lectus. Mauris consequat vestibulum dolor pretium pulvinar.</div>
    </div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

因为我没有添加的字体@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);,所以我只是添加font-family: 'Source Sans Pro', sans-serif;到您的.block css 规则中。
我在我的示例中添加了一些基本的标签 html head body。

试一试。看看这样是否可以。