通过 wkhtmltopdf 使用自定义字体答案

【问题标题】：use custom fonts with wkhtmltopdf通过 wkhtmltopdf 使用自定义字体
【发布时间】：2023-03-08 22:12:01
【问题描述】：

我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体。我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype .ttf 文件。谁能证实这一点？所以我从 google webfont 下载了一个 .ttf 文件并放在我的服务器上，然后使用字体：

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

和字体系列：

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

现在应该使用 Jolly Lodger 字体呈现的文本根本没有出现，页面是空白的。

我做错了什么？

PS：我尝试了不同的 .ttf 文件。

【问题讨论】：

我对此进行了测试，并且能够让 TTF 正常工作。您确定 src 网址正确吗？您确定 TTF 正常工作（您是否在系统上尝试过）？如果您在服务器上安装字体并通过常规 CSS 调用它，您的运气可能会更好。
g33kinfo.com/info/archives/1806
在使用带有的谷歌网络字体时可以正常工作。也许我的 .ttf 文件最后确实有问题......
嗨 Marronsuisse，你能解释一下你用的是什么吗？我有同样的问题，但它无论如何都不起作用。

标签： css fonts wkhtmltopdf

【解决方案1】：

由于它是一种 Google Web 字体，因此您无需在样式表中编写 @font-face，只需在源代码中使用以下链接标记：

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

和

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

会起作用的。

顺便说一句，在您的代码中，您将 @font-face 系列定义为 font-family: Jolly; 并将其用作 p { font-family: 'Jolly Lodger', cursive; }，这是错误的，因为它与字体系列名称不匹配。

【讨论】：

我没有故意使用链接标签，因为我读到 wkhtmltopdf 在直接从 google webfonts 检索字体时不起作用。这就是我下载字体并将其包含在我的项目中的原因。不过，当我在 html 页面中使用字体时，使用标签可以正常工作。你是对的，我的代码有错误我会编辑它，但即使名称匹配，字体仍然不会出现在 pdf 文件中。我尝试了一个 ttf 文件和一个 otf 文件。
我在这个答案中使用了代码，它运行良好（使用 wkhtmltoimage）。也许当前版本的 wkhtmltox 工具已更新以支持此功能？
不适用于我，不适用于 Linux 0.12.2.1（也不是 MacOS）上的 wkhtmltopdf

【解决方案2】：

我敢打赌，您正在使用 IIS 从 Web 包装器调用 wkhtmltopdf。这就是为什么有些人说它确实对他们有用。他们可能是从命令行调用 wkhtmltopdf，在这种情况下，它可以解析 CSS URL()s 中的相对链接，但如果你从 snappy 或类似的地方调用它，你可以通过指定一个 URL 来解决这个问题，比如URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')而是。

在 wkhtmltopdf 0.11.0_rc1 中似乎无法正确解析 CSS URL() 标记中的相对链接，但一些早期版本可能工作正常。其他 CSS URL() 标签也会出现同样的问题，例如在调用背景图像时 - 解析文件位置已损坏。有趣的是，在图像的情况下，如果您使用<IMG SRC=>，即使提供了相对路径，0.11.0_rc1 也能够找到该文件。问题似乎仅限于 CSS 中的 URL() 标记。

编辑： 我发现如果您在路径中使用带有所有 forward 斜杠的 file:///，那么它可以工作。换句话说，URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf') 应该可以工作。

【讨论】：

谢谢。 file:// URL 似乎是带有本地字体和字体的东西。例如。 url(file:///my/dir/font.ttf) 在 Linux 上。我错误地尝试了local()，但我认为这是为了引用没有路径的字体（在已安装的字体目录之外）。
在 0.12.* 中使用 *nix 上的包装器解析相对链接仍然存在问题。
使用src: url(file://myFont.ttf); 与我正在使用的一种字体一起使用（注2正斜杠）。对于另一个字体，没有办法在本地包含它，所以我不得不继续引用 googleFonts @import url('https://fonts.googleapis.com/css?family=myFont&display=swap'); 否则 wkhtmltopdf 根本不会呈现内容。奇怪的是它不会依赖于其他定义的字体。
我有两个关于这个话题的问题。首先，如何将此解决方案应用于 ssl 项目。那我可以在urls调用后添加格式吗？

【解决方案3】：

我发现 Arman H. 在这个问题上的解决方案（对字体进行 base64 编码）非常有效：Google Web Fonts and PDF generation from HTML with wkhtmltopdf

【讨论】：

【解决方案4】：

如果您有 .ttf 文件或 .woff 文件，请使用以下语法

@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }

不要使用无效的ttf，而是使用全名'truetype'，如果您有.woff，则使用'woff' 格式。就我而言，它有效。

然而，最好的做法是使用 Google 字体 API 的链接，如果不符合您的标准，那么最好使用上面的技术，它会起作用

【讨论】：

【解决方案5】：

我也会在这里添加我的答案，以防有人需要。

我一直在使用基于 wkhtmltopdf 的Rotativa，我最终使用的是以下内容：

@font-face {
    font-family: "testfont";
    src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
         url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

...看起来 Rotativa 正在采用 SVG 版本。如果我对它们重新排序，它仍然可以工作，但如果我删除 SVG 版本，它就会停止工作。

可能值得一试。但是，找不到任何好的文档说明为什么会这样

【讨论】：

【解决方案6】：

As stated above by Yardboy 我们发现在我们的 CSS 中对 truetype 字体进行 base64 编码效果很好。但我想分享一些额外的见解。

我们使用 4 种自定义字体，所有字体都唯一地命名为 'Light' 'Medium' 等。

我使用 openssl 工具包进行 base64 编码，效果很好。但您也可以使用fontsquirrel。只要确保去掉所有其他字体类型（'woff''otf'..）。我们发现使用 truetype 独占神秘地工作。

编码文件，修剪输出并添加到剪贴板

openssl base64 -in bold.ttf | tr -d '\n' | pbcopy

在 Windows 中，您应该安装 openssl 并将其添加到路径中

openssl base64 -in bold.ttf | tr -d '\n' | clip

或者干脆使用this kind of websites

添加到css字体src属性

   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }

渲染输出将取决于您的 wkhtmltopdf 版本和风格。因为我们的服务器运行 Debian，而我在 OSX 上开发，所以我在本地 VM 上进行了测试。

【讨论】：

你的意思是这会在生成的PDF文档中嵌入字体吗？
您是对整个 url 进行编码（使用基本 http://...）还是仅对带有字体 (/fonts/...) 的路径进行编码？
这应该有帮助吗？ stackoverflow.com/a/35120327/3384225不是URL，字符串是base64编码的字体文件

【解决方案7】：

在做了所有建议的解决方法（一些确实有效）之后，我遇到了一个更简单的解决方案：

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

您可以简单地使用@import 符号来包含字体。

【讨论】：

在 wkhtmltopdf 0.12.3.2（带有修补的 qt）中对我不起作用 - win 8.1
@xtian 它对我有用 django-wkhtmltopdf==2.0.3
进一步调查显示，在我的测试中不起作用的是导入和使用具有不同权重的字体：无论 css 设置如何，在所有文档中都只使用了一个权重。这显然已在 v0.13 alpha 中得到修复。
@xtian 好消息，所以字体的粗细不能指定？您介意链接到该错误吗？
当我发现 alpha 版本正在运行时，我关闭了这个错误报告。我没有得到任何官方确认，但你可以做我在报告中详述的测试，看看它是否对你有影响：github.com/wkhtmltopdf/wkhtmltopdf/issues/3151

【解决方案8】：

我个人必须在div 上设置字体系列（我最初想要span）

<style>
@font-face {
    font-family: 'CenturyGothic';
    src: url("fonts/century-gothic.ttf") format('truetype');
}

.title {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 22pt;
}
</style>

...

<div class="title">This is Century Gothic</div>

【讨论】：

【解决方案9】：

使用@import 不获取字体，您需要将.ttf 文件添加到项目中

【讨论】：

【解决方案10】：

以防万一您还没有解决任何问题：

请尝试wkhtmltopdf的独立版本，而不是可安装版本。

我遇到了类似的问题，但通过以下方式解决了：

https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.mxe-cross-win64.7z

解压文件 > 进入 bin 文件夹 > 运行你的命令。

【讨论】：