使用 wkhtmltopdf 打印包含 Font Awesome 图标的 HTML答案

【问题标题】：Print HTML containing Font Awesome icons with wkhtmltopdf使用 wkhtmltopdf 打印包含 Font Awesome 图标的 HTML
【发布时间】：2014-09-19 15:36:59
【问题描述】：

我想用wkhtmltopdf 打印一个包含Font Awesome 图标的HTML 页面。我在 Google 字体中看到了这个问题：Google Web Fonts and PDF generation from HTML with wkhtmltopdf，但这种方式不起作用。

【问题讨论】：

标签： html wkhtmltopdf font-awesome

【解决方案1】：

在你的 Font Awesome 库目录中添加 .woff 文件（css 中没有 base64），它应该可以工作。

【讨论】：

你能用一个例子进一步解释一下吗？

【解决方案2】：

你有什么例子吗？

我在这个问题上看到了类似的东西： https://github.com/mileszs/wicked_pdf/issues/587

文件名包含回车符，它不是有效的显示符号。您看到的字形通常是对私有 Unicode 字符区域的研究。

【讨论】：

我也有同样的问题

【解决方案3】：

我通过像这样内联文件的 TTF 版本解决了这个问题：

<style type="text/css">
@font-face {
    font-family: 'FontAwesome';
    src: url(data:application/x-font-truetype;base64,<< insert base64 encoded fontawesome-webfont.ttf here >>) format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

然后内联font-awesome.css 文件。但是您需要删除该文件的@font-face at-rule，因为 wkhtmltopdf 不喜欢定义相同字体的多个@font-faces。您可以通过内联文件的修改版本或使用正则表达式删除 at 规则来做到这一点（例如：@font-face\s*\{[^\}]*\}）。

（我尝试将原始@font-face 原封不动地保留下来，希望以后的定义会覆盖它，但这不起作用。CSS 标准似乎没有定义当出现相同字体的两个@font-face 时会发生什么，如果我没看错的话）

【讨论】：

无头铬打印到 pdf 也为我工作。谢谢！