使用带有wkhtmltopdf自定义字体(use custom fonts with wkhtmlt

我试图与wkhtmltopdf生成我的PDF使用自定义字体。 我读了你无法使用谷歌网络字体和wkhtmltopdf使用TrueType字体的.ttf文件。 任何人都可以证实？ 所以，我下载了从谷歌web字体.TTF一个文件，并把我的服务器上，则使用的字体：

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

和字体家族：

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

而现在，应该与乔利房客字体渲染不会出现在所有的文字，页面是空白。

我究竟做错了什么？

PS：我试着用不同的.ttf文件。

Answer 1:

既然是谷歌的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。 这就是为什么有些人说的，它并为他们工作。 他们很可能调用命令行，在这种情况下，它可以解决CSS URL相对链接（wkhtmltopdf）秒，但如果你是从瞬间或调用它就像你可以通过指定好比说一个URL得到解决该问题URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')来代替。

由于无法妥善解决CSS URL相对链接（）标记出现在wkhtmltopdf 0.11.0_rc1被打破，但一些早期版本可能工作好了。 同样的问题与其他CSS URL（）标记发生调用一个背景图像时一样 - 解析该文件的位置被打破。 但有趣的是，在图像的情况下，如果你使用<IMG SRC=> ，0.11.0_rc1能够找到该文件，即使是提供了一个相对路径。 这个问题似乎仅限于URL（）标签内的CSS。

编辑：我发现，如果你使用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字体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我在虚拟机上测试本地。

Answer 4:

如果你有.TTF文件或文件.woff然后使用以下语法

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

不要使用ttf这是行不通的，而使用全名'truetype' ，如果你有.woff然后使用'woff'格式。 对于我来说，它的工作。

然而，最好的做法是使用链接谷歌字体API是最好的，如果没有得到这符合您的条件，然后使用这个上面的技术，将工作

Answer 5:

我就加我的答案也在这里，万一有人可能需要它。

我一直在使用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 6:

我发现，阿尔曼H.解决方案（base64编码的字体）在对这个问题的工作就像一个魅力： 谷歌的Web字体和PDF生成HTML从与wkhtmltopdf

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>

文章来源: use custom fonts with wkhtmltopdf