35

I am trying to use custom fonts in my PDF generated with wkhtmltopdf. I read that you can't use google webfonts and that wkhtmltopdf uses truetype .ttf file. Can anyone confirm that? So I downloaded a .ttf file from google webfont and put in on my server, then used the font face:

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

and font family:

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

And now the text that is supposed to render with Jolly Lodger font doesn't appear at all, page is blank.

What am I doing wrong?

PS: I tried with different .ttf files.

4

10 回答 10

29

由于它是一种 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-facefamily 定义为font-family: Jolly;并使用它p { font-family: 'Jolly Lodger', cursive; }是错误的，因为它与 font-family 名称不匹配。

于 2012-05-16T07:10:05.837 回答
21

我打赌你正在使用 IIS 从网络包装器调用 wkhtmltopdf。这就是为什么有些人说它确实对他们有用。他们可能是从命令行调用 wkhtmltopdf，在这种情况下，它可以解析 CSS URL()s 中的相对链接，但如果您从 snappy 等调用它，您可以通过指定类似 say 的 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() 标记。

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

于 2013-02-13T22:14:21.047 回答
17

正如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

或者干脆使用这种网站

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

于 2016-03-04T01:48:52.050 回答
7

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

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

不要使用ttf它不起作用，而是使用全名'truetype'，如果你有 .woff 然后使用'woff'格式。就我而言，它起作用了。

但是，最好的做法是使用指向 Google 字体 API 的链接，如果不符合您的标准，则最好使用该技术，然后使用上述技术它会起作用

于 2013-11-16T19:24:26.930 回答
4

我发现 Arman H.'s solution (base64 encoding the fonts) over this question就像一个魅力：Google Web Fonts and PDF generation from HTML with wkhtmltopdf

于 2013-06-06T21:16:46.610 回答
3

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

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

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

于 2014-08-15T12:59:28.477 回答
1

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

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

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

于 2016-08-26T08:09:27.080 回答
1

我个人不得不将字体系列设置在 a div（我最初想要 a 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>
于 2018-05-14T14:56:27.440 回答
0

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

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

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

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

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

于 2021-01-18T13:47:39.777 回答
0

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

于 2019-06-24T07:03:26.887 回答