69

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

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

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

谁能帮我解决这个问题？

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

4

9 回答 9

58

通过wkhtmltopdf尽量避免woff字体来将 HTML 转换为 PDF。使用with编码的truetype格式。Google Web Fontsbase64

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

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

在此处阅读解决方案。

于 2013-08-16T01:13:09.483 回答
41

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

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

FontSquirrel 可以通过其Webfont Generator的高级选项为您执行此操作；谷歌和其他字体可以用这个工具进行编码。

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

于 2013-04-25T00:27:58.933 回答
14

我遇到了同样的问题，并通过下载字体并使用以下字体声明从我的 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 来说是 woff （我相信）。但wkhtmltopdf无法在 PDF 中嵌入 woff 字体，因此默认为无衬线字体。通过声明所有这些，TrueType 字体被包括在内，这是 PDF 实际使用的字体。

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

于 2012-01-20T18:48:24.733 回答
11

我刚刚测试了使用@import符号的工作原理：

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

我正在使用 django-wkhtmltopdf 2.0.3 版

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

于 2016-08-26T08:17:04.940 回答
3

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

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

body{
    font-family: 'Lato';
}

现在wkhtmltopdf应该能够包含字体

于 2016-05-16T21:59:36.340 回答
2

我一定尝试了无数种变体来完成这项工作（来自本地）。我正在尝试通过 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');}
于 2013-05-31T09:05:17.423 回答
2

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

--javascript-delay 1000

谷歌字体文本开始出现。

[wkhtmltopdf 0.12.4（带有补丁的qt）]

于 2018-04-16T21:17:34.510 回答
1

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

于 2011-07-17T04:13:00.413 回答
1

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

<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>
于 2019-11-08T15:31:00.347 回答