使用 wkhtmltopdf 从 HTML 生成 Google Web 字体和 PDF
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6721295/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Web Fonts and PDF generation from HTML with wkhtmltopdf
提问by Mathieu Rodic
I am using wkhtmltopdfto convert HTML files in PDF format; it gives surprisingly good results, rendering the PDF exactly as WebKit would do.
我正在使用wkhtmltopdf将 HTML 文件转换为 PDF 格式；它给出了令人惊讶的好结果，完全按照 WebKit 的方式渲染 PDF。
I am using Google Web Fontsto give users the possibility to customize the appearence of the document they edited, offering them the possibility to choose between a few fonts. It also works perfectly in a browser.
我正在使用Google Web Fonts让用户可以自定义他们编辑的文档的外观，让他们可以在几种字体之间进行选择。它也可以在浏览器中完美运行。
Problem is, I don't get the Google Fonts working when converting such HTML files to PDF with wkhtmltopdf. I read other people had the same issue.
问题是，使用 wkhtmltopdf 将此类 HTML 文件转换为 PDF 时，我无法使用 Google 字体。我读过其他人也有同样的问题。
Could anyone please help me fixing this?
有人可以帮我解决这个问题吗？
EDIT: declaring @font-face directly in the CSS does not work either.
编辑：直接在 CSS 中声明 @font-face 也不起作用。
采纳答案by Shaharia Azam
To convert HTML to PDF by wkhtmltopdftry to avoid wofffont face. Use the truetypeformat of the Google Web Fontswith base64encode.
通过wkhtmltopdf尽量避免woff字体将 HTML 转换为 PDF 。使用with编码的truetype格式。Google Web Fontsbase64
Recently I tried to use a Google web font from Google Web Fonts. In the browser it shows correctly but it doesn't show after converting HTML to PDF.
最近我尝试使用 Google Web Fonts 中的 Google Web 字体。在浏览器中它显示正确，但在将 HTML 转换为 PDF 后不显示。
After searching the web extensively, at last, I found tools to encode fonts to the base64format and also got CSS for @font-face.
在网上广泛搜索后，我终于找到了将字体编码为base64格式的工具，并且还获得了 .css 的 CSS @font-face。
Read the solution here.
在此处阅读解决方案。
回答by Arman H
A simple solution: Base64-encode your font and embed it in the CSS:
一个简单的解决方案：对您的字体进行 Base64 编码并将其嵌入到 CSS 中：
@font-face {
font-family: 'OpenSans';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
FontSquirrel can do this for you through the advanced options of their Webfont Generator; Google and other fonts can be encoded with this tool.
FontSquirrel 可以通过其Webfont Generator的高级选项为您完成此操作；可以使用此工具对Google 和其他字体进行编码。
I've used this solution with pdfkitand wicked_pdf, which work through wkhtmltopdf, so I presume this should work with the native wkhtmltopdfas well.
我已经将这个解决方案与pdfkitand 一起使用wicked_pdf，它通过 wkhtmltopdf 工作，所以我认为这也应该适用于本机wkhtmltopdf。
回答by Joseph Erickson
I had this same problem and solved it by downloading the fonts and running it off of a local file in my web server with this font-face declaration:
我遇到了同样的问题，并通过下载字体并使用此 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;
}
I was able to find this font on Font Squirrel, but your mileage may vary.
我能够在Font Squirrel上找到这种字体，但您的里程可能会有所不同。
I think what happens with the fonts off of Google is that it's trying to load only the format that it thinks this browser wants, which for WebKit is woff (I believe). But wkhtmltopdfcan't embed a woff font in a PDF, and so defaults back to sans-serif. By declaring all of them, the TrueType font is included, which is what the PDF actually uses.
我认为谷歌的字体会发生什么，它试图只加载它认为这个浏览器想要的格式，这对于 WebKit 来说是 woff（我相信）。但是wkhtmltopdf不能在 PDF 中嵌入 woff 字体，因此默认为 sans-serif。通过声明所有这些，包括 TrueType 字体，这是 PDF 实际使用的字体。
Also, you need to define the font you want used as the first one in any font-family CSS definition or wkhtmltopdf will just ignore it.
此外，您需要定义要用作任何字体系列 CSS 定义中的第一个字体的字体，否则 wkhtmltopdf 将忽略它。
回答by guival
I've just tested that using the @importnotation works:
我刚刚测试了使用该@import符号是否有效：
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
I'm using django-wkhtmltopdf version 2.0.3
我正在使用 django-wkhtmltopdf 2.0.3 版
回答by xtian
In my case I just had to add this option
就我而言，我只需要添加此选项
--javascript-delay 1000
and Google Font text started to show up.
和谷歌字体文本开始出现。
[wkhtmltopdf 0.12.4 (with patched qt)]
[wkhtmltopdf 0.12.4（带有补丁的qt）]
回答by San Bluecat
I've been struggling with this for about two days now, my advice to you if none of the answers above work for you:
我已经为此苦苦挣扎了大约两天，如果上述答案都不适合您，我给您的建议：
Install the font (ttf) in the machine that hosts the webserver and just require it in the css just like you would do with a common font.
将字体 (ttf) 安装在托管网络服务器的机器上，并像使用常用字体一样在 css 中要求它。
body{
font-family: 'Lato';
}
Now wkhtmltopdfshould be able to include the font
现在wkhtmltopdf应该能够包含字体
回答by jenson-button-event
I must have tried a gazillion variations to get this work (from local). I am trying to get Open Sans Condensed embedded into a pdf via WKHtmlToPdf.
我一定已经尝试了无数变体来获得这项工作（从本地）。我正在尝试通过 WKHtmlToPdf 将 Open Sans Condensed 嵌入到 pdf 中。
I think it is important that you download and install the Open Sans Condensed ttf directly from google and install it. It is also important to reboot to allow other services access after install. I downloaded the ttf from font-squirrel originally and condensed was listed as "Open Sans" in windows/fonts, which is wrong, if you look after the google install it is listed as "Open Sans Condensed Light" so even google's local('Open Sans Cond Light')script is wrong.
我认为直接从谷歌下载并安装 Open Sans Condensed ttf 并安装它很重要。安装后重新启动以允许其他服务访问也很重要。我最初从 font-squirrel 下载了 ttf 并且 condensed 在 windows/fonts 中被列为“Open Sans”，这是错误的，如果你查看谷歌安装后它被列为“Open Sans Condensed Light”，所以即使谷歌的local('Open Sans Cond Light')脚本也是错误的.
As mentioned before you need to be explicit with the stretch and weights, so this is what has worked for me:
如前所述，您需要明确拉伸和重量，所以这对我有用：
@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');}
回答by Andres Ilich
Make sure you're not declaring what font you are printing with in your print stylesheet.
确保您没有在打印样式表中声明要打印的字体。
回答by Pawe? Go?cicki
The following works for me. Notice the inclusion of extended character sets (if you need them):
以下对我有用。请注意包含扩展字符集（如果需要）：
<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>
