Helvetica字体在wkhtmltopdf中无法使用

Question

我一直在尝试在创建pdf时使用Helvetica字体，但是pdf中没有显示出该字体。

我通过谷歌搜索找到了一些解决方案，但都没有起作用。

尝试方案1

我在这里发现了类似的内容: 字体问题

尝试那里提到的最后一个解决方法

解决办法是在css中定义@font-face并具有src链接， 指向wkhtmltopdf可访问的外部主机

但是这个解决方案不起作用。

尝试方案2 我还尝试使用Google字体API，但结果仍然无法使用。 Helvetica字体

以下是一个示例 自定义字体的示例

尝试方案3 我尝试使用css属性@ page进行操作。 但是那也没起作用。

有什么可行的解决方案。

- Padmalochan

---

定义@font-face并链接到外部主机也应该可以工作。不过仅仅声明@font-face是不够的，我怀疑你的样式表实际上没有在任何HTML元素中使用字体。在链接到外部主机或将字体编码到样式表后，请尝试设置CSS以在某些HTML标记上实际使用字体：body { font-family: 'Helvetica'; }。 - Arman H

Padmalochan，你搞定了吗？ - Chords

@Chords 是的，被标记为正确的解决方案是可行的。 - Padmalochan

Answer 1

修复wkhtmltopdf的字体问题最简单的方法是对字体进行Base64编码（你可以使用这个工具），并将其包含在你的CSS中：

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

这适用于所有字体（包括谷歌字体），并保证在不同的计算机和操作系统上具有跨平台兼容性。

- Arman H

---

是的，我认为这与此处提供的解决方案相同。https://dev59.com/oWw15IYBdhLWcg3wSJk3#16204485。然而，生成的文件似乎没有显示Helvetica字体。 - Padmalochan

是的，我也这样做了，但生成的 PDF 中显示的字体类型仍然是 Arial。 - Padmalochan

@JaredEitnier，旧链接已经失效。请尝试使用这个网站代替：http://www.opinionatedgeek.com/dotnet/tools/base64encode/，它可以完成同样的功能。 - Arman H

谢谢你的夸奖！如果有人感兴趣，我使用了这个 Base64：https://github.com/alixaxel/typhon/blob/master/typeface/sans-serif/Helvetica%20Neue.base64 - Benjamin Vison

使用@LucasLaurens的解决方案，您不需要使用字体文件本身的URL或相对路径。相反，您首先对文件进行base64编码，然后将编码的字体数据直接粘贴到CSS样式表中的“src”属性中，如示例所示。 - Arman H

Answer 2

对我来说，从Google Fonts加载字体并没有起作用。而且将base64编码的二进制文件放入CSS文件中对我来说有点过于麻烦（韩文字体几兆字节）。我建议在计算机上安装您需要使用的字体。对于Ubuntu系统，您可以从Google Fonts下载字体文件，然后将文件复制到$HOME/.fonts目录中，并在命令行中运行fc-cache命令来重建字体列表。

$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv

对于Rails应用程序，您可以创建符号链接。

$ ln -s /your/app/root/assets/fonts ~/.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
....

- baxang

---

我们在生产工作负载中使用类似的方法，使用wkhtmltopdf。我们服务器上安装的字体对我们来说效果很好。 - theandywaite

谢谢您建议使用 fc-list。这足以找到我服务器上可用的字体 :) - igorsantos07

这应该是被接受的解决方案，对字体进行base64编码有点像黑客行为。同时需要理解wkhtmltopdf使用的是服务器上的字体，就像你在PC或Mac上添加缺失的字体一样，你需要将字体添加到服务器上。如果你想要系统范围内安装MS字体，请参考这个链接：https://unix.stackexchange.com/questions/217365/how-to-install-microsoft-true-type-fonts-for-centos-7 - kasimir

这个解决方案对我也适用（CentOs 7 Linux），但是有一个修改：似乎TTF文件中的“Family Name”属性是问题制造者，因为Linux会匹配Family Name，所以如果所有字体都有相同的Family Name（Heebo），就会出现问题。因此，我编辑了TTF文件，并将Family Name更改为“Hebbo-Light”（使用“Font-Forge”软件，在“Element”菜单>“Font-Info”屏幕中编辑“Family”属性，加上破折号，与CSS中的完全一样），然后重新安装字体在Linux上 - 它可以工作！ - user1598814

Answer 3

此外，我在Linux上使用wkhtmltopdf 0.12.1（带有修补的qt）时，以下方法对我有效：

@font-face {
    font-family: dejaSansMono;
    src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
} 

也就是说，需要指定.ttf字体的路径。仅仅命名任何字体族名称是不起作用的，即使在浏览器中它可以工作。

- CodeClown42

Answer 4

扩展baxangs的回答，针对Linux（x64）用户：您可以将ttf字体文件安装在/usr/share/fonts/font-folder/font-name中。

然后在您的CSS文件中使用fc-list中列出的字体名称，无需使用@font-face，只需在CSS中使用字体名称即可。

例如Verdana.ttf======

从本地机器复制到服务器中的/usr/share/fonts/Verdana/Verdana.ttf中

使用fc-list获取字体名称（很可能是Verdana）

然后在您的CSS中使用P { font-family: 'Verdana'}

就这样！我花了一段时间才解决它。

- Khallouki

Answer 5

我曾经遇到过从Google下载PT Sans字体的问题。对我有效的解决方法如下:

1. 从Google下载PT Sans字体，然后通过fontsquirrel生成器运行它
2. 将@font-face（我只使用了ttf）放入CSS中（在我的情况下是在PHP文件的HTML头部）

注意，我没有使用base64，但它按预期工作。

希望能帮到你。

- Dan

Answer 6

如果要使用 wkhtmltopdf 将 HTML 转换为 PDF，请尽量避免使用 woff 字体。请使用 Google Web Fonts 的 trutype 格式，并进行 base64 编码。

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

然后，在搜索了很多网页之后，我终于找到了将字体编码为 base64 编码格式的工具，并获得了 @font-face 的 CSS。

- Shaharia Azam