在 wkhtmltopdf 中使用自定义字体

Question

我正在尝试在使用 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 文件。

Answer 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; } p { font-family: 'Jolly Lodger', cursive; }这是错误的，因为它是不匹配的字体系列名称。

Answer 2

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

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

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

Answer 3

正如Yardboy上面所说，我们发现在我们的 CSS 中使用 base64 编码 truetype 字体效果很好。 但我想分享一些额外的见解。

我们使用 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

或者干脆使用这种网站

添加到 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 上进行了测试。

Answer 4

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

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

不要使用不起作用的ttf ，而是使用全名'truetype' ，如果您有 .woff，则在格式中使用'woff' 。 对于我的情况，它起作用了。

但是，最佳做法是使用指向 Google fonts API 的链接，如果没有获得与您的条件匹配的最佳链接，则使用上述技术即可

Answer 5

我发现 Arman H. 在这个问题上的解决方案（base64 编码字体）就像一个魅力： Google Web Fonts and PDF generation from HTML with wkhtmltopdf

Answer 6

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

我一直在使用Rotativa它建立在wkhtmltopdf，以及我最终使用是以下情况：

@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 版本，它就会停止工作。

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

Answer 7

在完成了所有建议的解决方法（一些实际有效）之后，我发现了一个更简单的解决方案：

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

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

Answer 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>

Answer 9

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

Answer 10

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

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

我有一个类似的问题，但它通过使用解决：

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

解压缩文件 > 转到 bin 文件夹 > 运行您的命令。