首页 文章

使用wkhtmltopdf的自定义字体

提问于
浏览 次
28

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

css fonts wkhtmltopdf

8 回答

  • 0

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

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

    您只需使用 @import 表示法来包含字体即可 .

    回复于
  • 2

    我个人不得不在 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>
    回复于
  • 8

    由于它是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 family定义为 font-family: Jolly; 并将其用作 p { font-family: 'Jolly Lodger', cursive; } ，这是错误的，因为它与字体系列名称不匹配 .

    回复于
  • 1

    我打赌你使用IIS从web包装器调用wkhtmltopdf . 这就是为什么有些人说它确实适合他们 . 他们可能从命令行调用wkhtmltopdf，在这种情况下它可以解析CSS URL（）中的相对链接，但是如果你是从snappy等调用它，你可以通过指定一个像 URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf') 这样的URL来解决问题 .

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

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

    回复于
  • 4

    As stated above由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

    或者只是使用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上进行了测试 .

    回复于
  • 17

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

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

    不要使用不起作用的 ttf 而不是使用全名 'truetype' 如果你有.woff那么请使用 'woff' 格式 . 对我而言，它有效 .

    然而，最好的做法是使用Google fonts API的链接，如果没有达到与您的标准相匹配的最佳效果，那么使用上述技术它将起作用

    回复于
  • 17

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

    我一直在使用Rotativa，它 Build 在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版本，它将停止工作 .

    可能值得一试 . 但是，找不到任何有关原因的好文档

    回复于
  • 0

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

    回复于

相关问题