使用wkhtmltopdf的自定义字体

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等调用它,你可以通过指定一个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 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 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的链接，如果未获得与您的条件匹配的链接，则最好使用该技术