Html helvetica 字体在 wkhtmltopdf 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15746240/
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
helvetica font not working in wkhtmltopdf
提问by Padmalochan
I have been trying to use Helvetica font while creating the pdf but the font is not reflected back in pdf.
我一直在尝试在创建 pdf 时使用 Helvetica 字体，但字体没有反映在 pdf 中。
I did some google and found some solutions but none are workable.
我做了一些谷歌并找到了一些解决方案，但没有一个可行。
Tried Solution 1
尝试解决方案 1
I found similar thing here : Font issue
我在这里发现了类似的东西： 字体问题
Tried the last solution mentioned over there
尝试了那里提到的最后一个解决方案
workaround is to define @font-facein your css and have src link to external host that is accessible by wkhtmltopdf
解决方法是在您的 css 中定义 @font-face并具有到 wkhtmltopdf 可访问的外部主机的 src 链接
But the solution is not working.
但解决方案不起作用。
Tried Solution 2I also tried to use google font api, but result is still not workable. helvetica font
尝试解决方案 2我也尝试使用 google font api，但结果仍然不可行。 黑体字体
here is an example Example of custom font
Tried Solution 3I tried doing it using css property @page. But that also is not working.
尝试解决方案 3我尝试使用 css 属性 @page 来做。但这也行不通。
What is the approach for a workable solution.
可行的解决方案的方法是什么。
回答by Arman H
The easiest way to fix wkhtmltopdf's font problems is to Base64 encode the font (you can use this tool) and include it in your CSS:
修复wkhtmltopdf字体问题的最简单方法是对字体进行 Base64 编码（您可以使用此工具）并将其包含在您的 CSS 中：
@font-face {
font-family: 'Helvetica';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
This works with all fonts (including Google Fonts), and guarantees cross-platform compatibility across different machines and operating systems.
这适用于所有字体（包括 Google 字体），并保证跨不同机器和操作系统的跨平台兼容性。
回答by baxang
For me loading fonts from Google Fonts didn't work. And putting base64ed binary into a CSS file seems a little to much for me(Korean types are several megabytes). I'd recommend to install the fonts you need to use on the machine. For Ubuntu you can simply download fonts files from Google Fonts and copy the files in to $HOME/.fontsdirectory and run fc-cachecommand in command line to rebuild the fonts list.
对我来说，从 Google Fonts 加载字体不起作用。将 base64ed 二进制文件放入 CSS 文件对我来说似乎有点多（韩国类型是几兆字节）。我建议在机器上安装您需要使用的字体。对于 Ubuntu，您可以简单地从 Google Fonts 下载字体文件并将文件复制到$HOME/.fonts目录中，然后fc-cache在命令行中运行命令以重建字体列表。
$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv
For a Rails application you can symlink
对于 Rails 应用程序，您可以符号链接
$ ln -s /your/app/root/assets/fonts ~/.fonts
Then you will be able to list all available fonts.
然后您将能够列出所有可用的字体。
$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....
回答by delicateLatticeworkFever
To add to the fray, using wkhtmltopdf 0.12.1 (with patched qt)on linux this worked for me:
为了增加竞争，wkhtmltopdf 0.12.1 (with patched qt)在 linux 上使用这对我有用：
@font-face {
font-family: dejaSansMono;
src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
}
I.e., specifying the path to the .ttf. Simply naming a font-family, any font-family, did not work even if it did in the browser.
即，指定.ttf. 简单地命名一个字体系列，任何字体系列，即使在浏览器中也不起作用。
回答by Khallouki
expanding baxangs answer for linux (x64) users: you install the ttf font file in /usr/share/fonts/font-folder/font-name
为 linux (x64) 用户扩展 baxangs 答案：您在 /usr/share/fonts/font-folder/font-name 中安装 ttf 字体文件
and then in your css file use the fontname which is listed in fc-list, you don't need to use @font-face, just use the fontname in your css
然后在您的 css 文件中使用 fc-list 中列出的字体名称，您不需要使用 @font-face，只需在您的 css 中使用字体名称
example Verdana.ttf======
示例 Verdana.ttf======
copy from local machine to server into /usr/share/fonts/Verdana/Verdana.ttf
从本地机器复制到服务器到 /usr/share/fonts/Verdana/Verdana.ttf
fc-list to get the fontname (most likely it'll be Verdana)
fc-list 获取字体名称（很可能是 Verdana）
Then use in your css P{ font-family: 'Verdana'}
然后在你的 css P{ font-family: 'Verdana'} 中使用
and that's it! took me a while to get it fixed.
就是这样！我花了一段时间才把它修好。
回答by user3281817
I had the same problem with PT Sans from google. What worked for me was the following process:
我在谷歌的 PT Sans 上遇到了同样的问题。对我有用的是以下过程：
- Download PT Sans from google and runt it through fontsquirrelgenerator
- Place the @font-face (I only used the ttf) in the css (in my case was in html head of a php file)
- 从谷歌下载 PT Sans 并通过fontsquirrel生成器运行它
- 将@font-face（我只使用了 ttf）放在 css 中（在我的例子中是在 php 文件的 html 头中）
Notethat I did not use base64 and it worked as expected.
请注意，我没有使用 base64，它按预期工作。
Hope it helps
希望能帮助到你
回答by Shaharia Azam
To convert HTML to PDFby wkhtmltopdftry to avoid woff font face. Use trutype format of the Google Web Fonts with base64 encode.
通过wkhtmltopdf将HTML转换为 PDF尽量避免 woff 字体。使用带有 base64 编码的 Google Web 字体的 trutype 格式。
Recently I tried to use a google web font from Google Web Fonts. But in browser it shows correctly but it doesn't show after converting HTML to PDF.
最近我尝试使用 Google Web Fonts 中的 google web 字体。但在浏览器中它显示正确，但在将 HTML 转换为 PDF 后不显示。
Then after searching lots of from web at last I found tools to encode fonts to base64encoded format and also got CSS for @font-face.
然后在从网上搜索了很多之后，我终于找到了将字体编码为base64编码格式的工具，并且还为@font-face获得了 CSS 。
