使用 wkhtmltopdf 从 HTML 生成 Google Web 字体和 PDF

Posted 2023-03-15

【中文标题】使用 wkhtmltopdf 从 HTML 生成 Google Web 字体和 PDF

【英文标题】：Google Web Fonts and PDF generation from HTML with wkhtmltopdf

【发布时间】：2011-10-06 23:16:52

【问题描述】：

我正在使用wkhtmltopdf 将HTML 文件转换为PDF 格式；它提供了令人惊讶的好结果，完全按照 WebKit 的方式呈现 PDF。

我使用Google Web Fonts 让用户可以自定义他们编辑的文档的外观，让他们可以在几种字体之间进行选择。它也可以在浏览器中完美运行。

问题是，当使用 wkhtmltopdf 将此类 HTML 文件转换为 PDF 时，我无法使用 Google 字体。我读到其他人也有同样的issue。

谁能帮我解决这个问题？

编辑：直接在 CSS 中声明 @font-face 也不起作用。

【参考方案1】：

要通过wkhtmltopdf 将HTML 转换为PDF，请尽量避免使用woff 字体。使用Google Web Fonts 的truetype 格式和base64 编码。

最近我尝试使用来自 Google Web Fonts 的 Google Web 字体。在浏览器中显示正确，但在将 HTML 转换为 PDF 后不显示。

在网上广泛搜索后，我终于找到了将字体编码为base64 格式的工具，还获得了@font-face 的CSS。

阅读解决方案here。

【讨论】：

+1。注意：正如链接解决方案页面上的评论中所述：它似乎不适用于 OS X (10.9)，但在 linux 下确实有效。

它在 Windows 中运行良好，也适用于 wkhtmltopdf 的节点包包装器。

这仍然不适用于压缩字体，例如 Roboto Condensed 根据 wkhtmltopdf-binary 0.12.3.1 和修补 QT。也许是由于持续的字距调整错误..？

你能更新链接吗？自上个月以来页面已不存在

如果还是不行，把字体转成base64字符串！

【参考方案2】：

一个简单的解决方案：对字体进行 Base64 编码并将其嵌入 CSS：

@font-face 
    font-family: 'OpenSans';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...

FontSquirrel 可以通过他们的Webfont Generator 的高级选项为您做到这一点；谷歌等字体可以编码with this tool。

我已经将此解决方案与pdfkit 和wicked_pdf 一起使用，它们通过wkhtmltopdf 工作，所以我认为这也应该与本机wkhtmltopdf 一起工作。

【讨论】：

我可以确认这对我有用，但是，我必须在 OS X 上使用 wkhtmltopdf v0.10.0-rc2。在这方面，最新版本对我不起作用。

@MetaSkills 感谢您提到这一点——我遇到了同样的问题，而且很难解决。 wkhtmltopdf 版本 0.12.3 在 OSX 上运行时不会与自定义字体配合，但在我们的 Ubuntu 登台和生产服务器上似乎可以正常工作。

@Topher Hunt 很高兴看到你的评论，我在 OSX 上也遇到了同样的情况，字体无法使用，但部署到 Ubuntu 服务器时会使用。

【参考方案3】：

我遇到了同样的问题，并通过下载字体并使用此字体声明从我的 Web 服务器中的本地文件运行它来解决它：

@font-face 
    font-family: 'PT Sans';
    src: url( '/public/inc/fonts/PTS55F-webfont.eot');
    src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
         url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

我在Font Squirrel 上找到了这种字体，但你的里程可能会有所不同。

我认为谷歌的字体会发生什么，它试图只加载它认为这个浏览器想要的格式，这对于 WebKit 来说是错误的（我相信）。但是wkhtmltopdf 不能在 PDF 中嵌入 woff 字体，因此默认为无衬线字体。通过声明所有这些，TrueType 字体被包括在内，这是 PDF 实际使用的。

此外，您需要在任何 font-family CSS 定义中定义要用作第一个字体的字体，否则 wkhtmltopdf 将忽略它。

【讨论】：

很好的解释。如果您访问 GWF 站点并下载字体的 zip 文件，它包含 wkhtmltopdf 可以处理的 TTF 文件。但是，我不确定 GWF 上的所有字体是否都包含 TTF。

非常感谢！我个人通过在我的计算机的 X11 服务器上安装字体（它们可以从存储库下载）找到了一种解决方法。

如果有人在我使用 Google Fonts API 搜索 PISA PDF HTML Django 问题时来到这里，请查看：xhtml2pdf.appspot.com/static/pisa-en.html 并使用 ttf 文件

关于 PISA 的另一个注意事项 - 你会开玩笑的）关于在 CSS 中链接字体有一个重要的问题。例如，在开发服务器上，它将与静态链接一起工作，但在生产环境中，要使其正常工作，您必须不通过 h​​ttp 链接它，而是链接到本地​​文件，因此例如为此目的使用 MEDIA_ROOT。

【参考方案4】：

我刚刚测试了使用@importnotation 的工作原理：

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

我正在使用 django-wkhtmltopdf 2.0.3 版

更新：仍在 django-wkhtmltopdf 3.3.0 中工作

【讨论】：

这实际上是最好的“解决方法”。恕我直言，这甚至不是一种解决方法，它只是将 gfont 与 wkhtmltopdf 一起使用的最干净的方法。谢谢

【参考方案5】：

我已经为此苦苦挣扎了大约两天，如果以上答案都不适合您，我的建议是：

在托管网络服务器的机器上安装字体 (ttf)，并在 css 中要求它，就像使用普通字体一样。

body
    font-family: 'Lato';

现在wkhtmltopdf应该可以包含字体了

【讨论】：

由于他允许用户根据可用的谷歌字体选择他们想要使用的字体，这可能意味着安装越来越多的字体

谢谢。我尝试了其他关于将一些巨大的 base64 编码字体字符串嵌入到我的代码中的答案，但不要认为这是一个好主意。最后，我安装了我需要的字体，因为我不需要太多的字体。

您能否详细说明如何包含它？比如src: public_path('fonts/noto-sans.regular.ttf') ;你是怎么导入的？

【参考方案6】：

我一定尝试了无数种变体来完成这项工作（来自本地）。我正在尝试通过 WKHtmlToPdf 将 Open Sans Condensed 嵌入到 pdf 中。

我认为直接从谷歌下载并安装 Open Sans Condensed ttf 并安装它很重要。安装后重新启动以允许其他服务访问也很重要。我最初从 font-squirrel 下载了 ttf，condensed 在 windows/fonts 中被列为“Open Sans”，这是错误的，如果你看一下谷歌安装它被列为“Open Sans Condensed Light”，所以即使是谷歌的local('Open Sans Cond Light')脚本是错误的。

如前所述，您需要明确拉伸和重量，所以这对我有用：

    @font-face  
     font-family: 'Open Sans'; 
     font-style: normal; 
     font-weight: 400; 
     src: local('Open Sans');
    

    @font-face  
     font-family: 'Open Sans Condensed'; 
     font-stretch:condensed; 
     font-style: normal; 
     font-weight: 300; 
     src: local('Open Sans Condensed Light');
    

@@font-face  font-family: 'Open Sans Condensed Bold'; font-stretch:condensed; font-style: normal; font-weight: 700; src: local('Open Sans Condensed'), local('Open Sans Condensed Bold');

【参考方案7】：

就我而言，我只需要添加此选项

--javascript-delay 1000

Google 字体文本开始显示。

[wkhtmltopdf 0.12.4（带补丁的qt）]

【参考方案8】：

确保您没有在打印样式表中声明要打印的字体。

【讨论】：

我遇到了这个问题，每个文档只有一个样式表。

做了一些测试，我发现你可以打印 web 字体的唯一方法是在你的 css 中声明完整的@font-face 代码，尽管 Firefox 3.6.13 中的支持似乎是充其量是粗略的（有时会打印，有时不会），但在所有其他浏览器中都可以正常工作。所以继续从 google 自动嵌入的 css 中获取@font-face 代码并将其直接添加到您的 css 中并尝试一下。

尝试在更新的浏览器中打印出来，例如 FF4 或 Chrome，fiddle.jshell.net/WZYmq/show

从网络浏览器打印效果很好。如前所述，导致问题的原因是使用 wkhtmltopdf 生成 PDF。

您认为另一种解决方案可能会在您的环境中发挥作用吗？比如cute pdf writer

【参考方案9】：

以下内容对我有用。注意包含扩展字符集（如果需要）：

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,600&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese);
</style>