自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用答案

【问题标题】：Custom fonts not working in Generated PDF using WKHTMLTOPDF Library自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用
【发布时间】：2017-05-08 19:14:16
【问题描述】：

我正在使用 Laravel 5.1 SnappyPDF 包装器，它使用 WKHTMLTOPDF 库。我正在尝试为我的 PDF 文件包含一些自定义谷歌字体，但这些字体在生成的 PDF 文件中不起作用。

我尝试将字体转换为Base64，还尝试通过绝对 URL 和相对 URL 包含字体，还尝试了堆栈溢出时可用的许多答案，但没有一个对我有用。如何解决此问题。

//Calling fonts
@font-face {
    font-family: Roboto Condensed;
    src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: 'Open Sans Semi Bold Italic';
    src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}

 //implenting fonts
.report-page2-col-wrapper .col-heading{
    font-family:"Open Sans Semi Bold Italic";
    font-size:12pt;
    line-height:17pt;
}

查看屏幕截图的差异

1) 这是网页浏览器的 HTML 版本，看起来找到并且字体实现正确

2) 这是生成的 PDF 版本，字体应用不正确

【问题讨论】：

标签： css laravel laravel-5.1 wkhtmltopdf truetype

【解决方案1】：

有多种解决方案可以做到这一点：

1) 如果您使用谷歌字体，请尝试以下操作：使用<link> 包含谷歌字体

<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>

使用<style> 应用字体效果

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

2) 用Base64 encode tool编码字体并在css中使用

@font-face {
    font-family: 'YOURFONTFAMILY';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

希望以上之一是您的解决方案！

拍摄参考：use custom fonts with wkhtmltopdf,helvetica font not working in wkhtmltopdf

【讨论】：

很高兴为您提供帮助...！
如果您不使用 Google 字体怎么办？ Base64 方法对我不起作用。

【解决方案2】：

除了 AddWeb 之外，您还必须在 HTML 标头 META 中添加 unicode 信息

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

【讨论】：