text-align：justify;不适用于wkhtmltopdf [英] text-align: justify; not working with wkhtmltopdf
问题描述
美好的一天！
我使用wkhtmltopdf库从HTML创建PDF文档。我根据这个问题使用了svg字体 wkhtmltopdf自定义字体字母间距
我使用了自定义字体，并通过@ font-face添加了它。
所有的工作都适合我，除了一件事情：text-align：justify不工作的原因。
I'm creates PDF docs from HTML using wkhtmltopdf library. I used svg font according to this issue wkhtmltopdf custom font letter spacing
在html文本中按预期排列，但而不是PDF。
I used custom font, added it by @font-face. All works fine for me, except one thing: text-align: justify is not working for some reason.
有人知道如何解决这个问题吗？
UPD >：添加了CSS和HTML示例
In html text is aligned as expected, but not in PDF.
Is anyone know how to fix this issue?HTML按预期呈现： http://i.imgur.com/hE3xYxt.png
UPD: Added CSS and HTML example
在PDF中，我得到了这个：< a href =https://i.imgur.com/S3KAPqg.png =nofollow noreferrer> http://i.imgur.com/S3KAPqg.png
<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>
$ b
<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>
由于我没有添加 @import url （http://fonts.googleapis.com/css?family=Source+Sans+Pro）; 和我刚刚添加了 font-family：'Source Sans Pro'，sans -serif; 添加到 .block css规则中。
我添加了基本的一些标签HTML头体到我的示例。
Since I don't have the font I've added @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro); and I just added font-family: 'Source Sans Pro', sans-serif; to your .block css rules.
And I added basic some tags html head body to my sample.
试一试。看看是否可以。
Give it a try. And see if it's ok that way.
这篇关于text-align：justify;不适用于wkhtmltopdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
