CSS 在 wkhtmltopdf 中使用自定义字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10611828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use custom fonts with wkhtmltopdf
提问by fkoessler
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:
我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体。我读到你不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype .ttf 文件。任何人都可以确认吗？所以我从 google webfont 下载了一个 .ttf 文件并放在我的服务器上，然后使用字体：
@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.
现在应该用 Jolly Lodger 字体呈现的文本根本没有出现，页面是空白的。
What am I doing wrong?
我究竟做错了什么？
PS: I tried with different .ttf files.
PS：我尝试了不同的 .ttf 文件。
采纳答案by Daljit
Since it is a Google Web font you need not to write @font-facein you style sheet just use following link tag in your source code:
由于它是 Google Web 字体，因此您无需@font-face在样式表中编写，只需在源代码中使用以下链接标签即可：
<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>
and
和
<style type = "text/css">
p { font-family: 'Jolly Lodger', cursive; }
</style>
will work.
将工作。
By the way, in your code you are defining @font-facefamily as font-family: Jolly;and using it as p { font-family: 'Jolly Lodger', cursive; }that is wrong, because it's mismatching font-family name.
顺便说一句，在您的代码中，您将@font-face系列定义为font-family: Jolly;并使用它p { font-family: 'Jolly Lodger', cursive; }是错误的，因为它与字体系列名称不匹配。
回答by Bezinga
I am betting you are calling wkhtmltopdf from a web wrapper using IIS. That's why some folks are saying that it does work for them. They are probably calling wkhtmltopdf from the command line, in which case it can resolve relative links in CSS URL()s but if you are calling it from snappy or the like you can get around the problem by specifying a URL like say URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')instead.
我敢打赌，您正在使用 IIS 从 Web 包装器调用 wkhtmltopdf。这就是为什么有些人说它确实对他们有用。他们可能从命令行调用 wkhtmltopdf，在这种情况下，它可以解析 CSS URL()s 中的相对链接，但如果您从 snappy 或类似调用它，您可以通过指定一个 URL 来解决问题，例如 say URL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')。
The inability to properly resolve relative links in CSS URL() tags appears to be broken in wkhtmltopdf 0.11.0_rc1 but some earlier versions might work okay. The same problem happens with other CSS URL() tags like when calling a background images - resolving the file location is broken. Interestingly though, in the case of images, if you use <IMG SRC=>, 0.11.0_rc1 is able to find the file, even if a relative path is provided. The problem appears to be limited to URL() tags inside CSS.
无法正确解析 CSS URL() 标签中的相关链接似乎在 wkhtmltopdf 0.11.0_rc1 中被破坏了，但一些早期版本可能可以正常工作。其他 CSS URL() 标签也会发生同样的问题，例如在调用背景图像时 - 解析文件位置已损坏。有趣的是，在图像的情况下，如果您使用<IMG SRC=>0.11.0_rc1 能够找到该文件，即使提供了相对路径。问题似乎仅限于 CSS 中的 URL() 标签。
EDIT:I found out that if you use file:///with all forwardslashes in the path then it works. In other words URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf')should work.
编辑：我发现如果你在路径中使用file:///所有正斜杠，那么它就可以工作。换句话说URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf')应该工作。
回答by tgk
As stated aboveby Yardboywe've found that base64 encoding the truetype font in our CSS works well. But I wanted to share some additional insight.
如上所述通过Yardboy我们发现，编码在我们的CSS TrueType字体的base64效果很好。但我想分享一些额外的见解。
We use 4 custom fonts all uniquely named 'Light''Medium'etc..
我们使用 4 种自定义字体，所有字体都具有唯一名称'Light''Medium'等。
I use openssl toolkit to base64 encode with good results. But you could alternatively use fontsquirrel. Just be sure to strip out all other font types ('woff''otf'.. ). We found that using truetypeexclusively worked mysteriously.
我使用 openssl 工具包进行 base64 编码，效果很好。但是您也可以使用fontsquirrel。只要确保去掉所有其他字体类型（'woff''otf'.. ）。我们发现，使用truetype完全可以神秘地工作。
Encode file, trim output and add to clipboard
编码文件，修剪输出并添加到剪贴板
openssl base64 -in bold.ttf | tr -d '\n' | pbcopy
In Windows you should install openssl and add it to path then
在 Windows 中，您应该安装 openssl 并将其添加到路径中
openssl base64 -in bold.ttf | tr -d '\n' | clip
or simply use this kind of websites
或者干脆使用这种网站
Add to css font src property
添加到 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");
}
Rendered output will depend on your wkhtmltopdfversion and flavor. Because our servers run Debian and I develop on OSX I tested on a VM locally.
渲染输出将取决于您的wkhtmltopdf版本和风格。因为我们的服务器运行 Debian，我在 OSX 上开发，所以我在本地的 VM 上进行了测试。
回答by ProgrammingNinja
If you have .ttf file or .woff file then use following syntax
如果您有 .ttf 文件或 .woff 文件，请使用以下语法
@font-face {
font-family: 'Sample Name';
src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
}
don't use ttfthat will not work rather use full name 'truetype'and if you have .woff then use 'woff'in format. For my case it worked.
不要使用ttf那将不起作用，而是使用全名'truetype'，如果您有 .woff 则使用'woff'格式。对于我的情况，它起作用了。
However the best practice is to use links to Google fonts API that is best if not getting that matching your criteria then use this above technique it will work
但是，最佳做法是使用指向 Google fonts API 的链接，如果没有获得与您的条件匹配的最佳链接，则使用上述技术即可
回答by Arve Systad
I'll just add my answer here too, in case someone might need it.
我也会在这里添加我的答案，以防有人可能需要它。
I've been using Rotativawhich builds upon wkhtmltopdf, and what I ended up using was the following:
我一直在使用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");
}
...and it seem's Rotativa is picking up the SVG-version. If I reorder them it still works, but if I remove the SVG-version, it stops working.
...似乎 Rotativa 正在选择 SVG 版本。如果我重新排序它们仍然有效，但如果我删除 SVG 版本，它会停止工作。
Might be worth a shot. Can't find any good documentation on why this is so, however
可能值得一试。找不到任何关于为什么会这样的好文档，但是
回答by Yardboy
I found that Arman H.'s solution (base64 encoding the fonts) over on this question worked like a charm: Google Web Fonts and PDF generation from HTML with wkhtmltopdf
我发现 Arman H. 在这个问题上的解决方案（base64 编码字体）就像一个魅力：Google Web Fonts and PDF generation from HTML with wkhtmltopdf
回答by guival
After doing all the workarounds suggested (some which actually worked), I came across a way easier solution:
在完成了所有建议的解决方法（一些实际有效）之后，我发现了一个更简单的解决方案：
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
You can simply use the @importnotation to include the font.
您可以简单地使用@import符号来包含字体。
回答by Benoit Duffez
I personally had to set the font family on a div(I initially wanted a span)
我个人不得不将字体系列设置为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>
回答by ITbug
using @import not fetching the font, you need to add .ttf file to the project
使用@import 不获取字体，您需要将 .ttf 文件添加到项目中
