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

Question

我使用wkhtmltopdf转换PDF格式的HTML文件; 它给出了令人惊讶的好结果,完全像WebKit那样呈现PDF.

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

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

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

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

Answer 1

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

最近,我尝试使用Google网络字体中的Google网络字体.在浏览器中它正确显示但在将HTML转换为PDF后不显示.

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

在这里阅读解决方案.

Answer 2

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

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

FontSquirrel可以通过Webfont Generator的高级选项为您完成此任务 ; 可以使用此工具对 Google和其他字体进行编码.

我已经使用了这个解决方案pdfkit和wicked_pdf,通过wkhtmltopdf工作,所以我认为这应该适用于本机wkhtmltopdf.

Answer 3

我有同样的问题并通过下载字体并使用此font-face声明从我的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字体,因此默认为sans-serif.通过声明所有这些,包含TrueType字体,这是PDF实际使用的.

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

Answer 4

我刚刚使用@import符号工作测试过:

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

我正在使用django-wkhtmltopdf 2.0.3版