文本对齐：对齐； 不使用 wkhtmltopdf
[英]text-align: justify; not working with wkhtmltopdf
问题描述
I'm creating PDF docs from HTML using wkhtmltopdf library.
我正在使用 wkhtmltopdf 库从 HTML 创建 PDF 文档。 I used svg font according to this issue wkhtmltopdf custom font letter spacing我根据这个问题使用了svg字体wkhtmltopdf自定义字体字母间距
I used a custom font, and added it by @font-face.我使用了自定义字体，并由@font-face 添加。 All works fine for me, except for text-align: justify is not working for some reason.一切对我来说都很好，除了text-align: justify由于某种原因不起作用。
In HTML text is aligned as expected, but not in PDF.在 HTML 中，文本按预期对齐，但不是在 PDF 中。
Is anyone know how to fix this issue?有谁知道如何解决这个问题？
UPD : Added CSS and HTML example 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>
HTML renders as expected: http://i.imgur.com/hE3xYxt.png HTML 按预期呈现：http: //i.imgur.com/hE3xYxt.png
And in PDF I got this: http://i.imgur.com/S3KAPqg.png在 PDF 中我得到了这个：http: //i.imgur.com/S3KAPqg.png
2 个解决方案
解决方案1
7 2017-02-03 14:47:03
You need to use a fix width size.您需要使用固定宽度尺寸。
body {
width: 22cm;
text-align: justify;
text-rendering: geometricPrecision;
}
解决方案2
1 已采纳 2015-01-27 09:41:09
Ok, I've tried this way, and it works for me :好的，我已经尝试过这种方式，它对我有用：
<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>
Since I don't have the font I've added @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);因为我没有字体，所以我添加了@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); and I just added font-family: 'Source Sans Pro', sans-serif;我刚刚添加了font-family: 'Source Sans Pro', sans-serif; to your .block css rules.到您的.block css 规则。
And I added basic some tags html head body to my sample.我在我的示例中添加了一些基本的标签 html 头体。
Give it a try.试试看。 And see if it's ok that way.看看这样行不行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.