Question

我正在尝试在使用wkhtmltopdf生成的PDF中使用自定义字体。我读到你不能使用谷歌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; }，这是错误的，因为它与字体系列名称不匹配。

Answer 2

我打赌您使用IIS从Web包装器调用wkhtmltopdf。这就是为什么有些人说它确实适合他们。他们可能从命令行调用wkhtmltopdf，在这种情况下它可以解析CSS URL（）中的相对链接，但如果你是从snappy等调用它，你可以通过指定一个像{{1}这样的URL来解决问题相反。

无法正确解析CSS URL（）标记中的相对链接似乎在wkhtmltopdf 0.11.0_rc1中被破坏，但某些早期版本可能正常工作。其他CSS URL（）标记也会出现同样的问题，例如调用背景图像时 - 解析文件位置会被破坏。有趣的是，在图像的情况下，如果使用URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')，即使提供了相对路径，0.11.0_rc1也能够找到该文件。问题似乎仅限于CSS中的URL（）标记。

编辑：我发现如果您在路径中使用<IMG SRC=>所有前向斜杠，那么它可以正常工作。换句话说，file:///应该有用。

Answer 3

<{> 3}} 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 font 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字体API的链接，如果没有达到与您的条件匹配的最佳效果，那么请使用上述技术

Answer 5

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

Answer 6

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

我一直在使用基于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版本，它就会停止工作。

可能值得一试。但无法找到有关原因的详细文档，但是

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 文件夹 > 运行您的命令。

使用wkhtmltopdf的自定义字体

10 个答案: