带有 Wicked PDF 和字母间距问题的 HTML 到 PDF答案

【问题标题】：HTML to PDF with Wicked PDF and letter-spacing issues带有 Wicked PDF 和字母间距问题的 HTML 到 PDF
【发布时间】：2012-08-17 16:32:22
【问题描述】：

同时使用 0.79 和 0.7.2 生成的 PDF 看起来与我的原始 HTML 略有不同。添加 show_as_html 标志会按预期显示它，但是内联样式在 PDF 中的处理方式与它们在 HTML 预览中的处理方式不同。

具体来说，我遇到的问题是字母间距声明，其中也有一个浮点数未正确呈现。因此，例如在具有字母间距的右侧浮动元素上，PDF 将字符间距过大并且从中心间隔开，以使文本部分离开屏幕而不是进一步向左碰撞以改变字母间距宽度.

这里是原始的 HTML sn-p:

<table width="800" border="0">

  <tr>
    <td colspan="3"><span style="font-family:Helvetica, Arial, sans-serif;font-size:10pt;margin-top:18px;text-transform:uppercase;float: right;letter-spacing:2pt">Winter 2013</span></td>
  </tr>
</table>

这是渲染的代码：

render :pdf => 'file_name', :template => 'template.html.erb', :layout => 'pdf.html'

这是呈现的 HTML：http://jsfiddle.net/wX4DQ/

这是输出的 PDF：http://imgur.com/sdUPM

我注意到wkhtmltopdf 上有一些似乎与此相关的错误报告。这可能是这个问题的罪魁祸首，什么是可以接受的解决方法？

我尝试了不同的字体，但我真的必须使用 Helvetica。

关于这里做什么或可行的解决方法有什么建议吗？

【问题讨论】：

我不确定我是否应该将其添加为答案或评论，所以就这样吧..您是否尝试过使用替代对齐技术，如 <td align="right" style="...">WINTER WRAP UP</td>？这并不能修复字母间距，但它可能有助于溢出。此外，如果您控制来源并且不关心可搜索性，您可能会作弊：<td><img src="/RMagick/spacing?phrase=WINTER%20WRAP%20UP" /></td>。
其实，我认为浮动问题是一个红色的麻烦，我应该无视这一点。无论浮动分配如何，字母间距都是一个问题。
我同意，我的第一个建议对此无济于事，但第二个建议会有所帮助（当然，这是很多工作，而且克服错误也需要付出代价）。

标签： wkhtmltopdf pdfkit wicked-pdf

【解决方案1】：

有很多事情会导致文本呈现和字母间距出现问题。如果您使用的是二进制文件，请尝试获取针对 QT 编译的二进制文件。如果您自己编译 wkhtmltopdf，请确保您编译它的系统安装并注册了一套不错的字体，否则字体看起来不正确。

此外，这一点 css 会有所帮助，尤其是在复制/粘贴时，某些字符之间会有随机的额外空格：

body { text-rendering: optimize-speed; }

【讨论】：

【解决方案2】：

我遇到了类似的问题，我设法通过将font-family 更改为从 Google 导入的一个来解决它。更多细节和可能的解决方法可以在this question 中找到。简而言之，这是解决问题的代码：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    font-family: "Open Sans";
}

【讨论】：