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
您需要使用固定宽度大小。
body {
width: 22cm;
text-align: justify;
text-rendering: geometricPrecision;
}
Run Code Online (Sandbox Code Playgroud)
好的,我已经尝试过这种方法,它对我有用:
<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。
试一试。看看这样是否可以。