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

问题描述

我使用 wkhtmltopdf 转换为 PDF 格式的 HTML 文件; 它给出了令人惊讶的好结果，正如 WebKit 所做的一样。

我使用 Google Web Fonts 给用户定制其编辑的文档的外观的可能性，为他们提供了选择几种字体的可能性。它也可以在浏览器中完美地工作。

问题是，当使用 wkhtmltopdf 将此类 HTML 文件转换为 PDF 时，我无法使 Google 字体正常工作。我读了其他人都有相同的 issue 。

有人可以帮我解决这个问题吗？

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

最佳解决方案

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

最近我试图使用 Google Web 字体的 Google 网络字体。在浏览器中，它正确显示，但在将 HTML 转换为 PDF 后不会显示。

在广泛搜索网页后，最后我发现了将字体编码为 base64 格式的工具，并获得了 @font-face 的 CSS 。

阅读解决方案 here 。

次佳解决方案

一个简单的解决方案：Base64 编码您的字体并将其嵌入到 CSS 中：

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

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

我已经使用 pdfkit 和 wicked_pdf 这个解决方案，它可以通过 wkhtmltopdf 进行工作，所以我认为这应该与原生的 wkhtmltopdf 一起使用。

第三种解决方案

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

@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 而言，它是 woff(我相信) 。但是 wkhtmltopdf 不能将 woff 字体嵌入到 PDF 中，因此默认为 sans-serif 。通过声明所有这些，包含 TrueType 字体，这是 PDF 实际使用的。

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

第四种方案

我必须尝试一个 gazillion 变体来获得这项工作 (从本地) 。我试图通过 WKHtmlToPdf 将 Open Sans Condensed 嵌入到 pdf 中。

我认为您必须直接从谷歌下载安装 Open Sans Condensed ttf 并进行安装。安装后重新启动以允许其他服务访问也很重要。我原来从 font-squirrel 下载 ttf，并在 Windows /Fonts 中列出了”Open Sans”，这是错误的，如果你照顾 google 安装它被列为「打开 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');}

第五种方案

我刚刚测试过使用 @import 符号工程：

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

我使用的是 django-wkhtmltopdf 2.0.3 版

参考文献

Google Web Fonts and PDF generation from HTML with wkhtmltopdf

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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