使用 Dompdf 将 HTML 导出为 PDF 时不显示字体真棒图标答案

【问题标题】：Font awesome icons are not displayed when exporting HTML to PDF with Dompdf使用 Dompdf 将 HTML 导出为 PDF 时不显示字体真棒图标
【发布时间】：2016-04-12 15:01:59
【问题描述】：

我正在使用 Dompdf 将 HTML 页面导出为 PDF。我正在使用一些显示在 HTML 文件本身中的 Font Awesome 图标，但在生成的 PDF 中，有问号而不是图标。

以下是部分 HTML 代码：

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Some title</title>
    <!-- Latest compiled and minified CSS - Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">        
<link href="http://domain.com/public/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<!-- -->

<div id="wrapper" >        <div id="page-wrapper">        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-10 col-xs-offset-1">
                    <div class="panel panel-default panel-table">
                        <div class="panel-heading">
    <div class="row">
        <div class="col-xs-12">
            <div class="bs-callout bs-callout-primary">
                <h4>Contact name</h4>
                <ul>
                    <li><span class="fa fa-envelope"></span> <strong>Email</strong>: some@mail.com</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>
                </ul>
            </div>
        </div>
            </div>
</div>
<div class="panel-body">

<!-- A table goes here -->


    </div>                                                                                                </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- .wrapper -->


</body>
</html>

这些图标不显示，PDF 中只有问号：

<li><span class="fa fa-envelope"></span> <strong>Email</strong>: some@mail.com</li>
                    <li><span class="fa fa-phone"></span> <strong>Telephone</strong>: 0000-0000</li>
                    <li><span class="fa fa-location-arrow"></span> <strong>Location</strong>: Address</li>

我该如何解决这个问题？

【问题讨论】：

听起来可能是编码问题。您的 HTML 文件的编码是什么？它应该是utf-8。如果不是这样，请尝试链接到 CDN 上的 font awesome 并查看是否可以解决问题。
是的，它是<meta charset="utf-8"/> 并已尝试链接到CDN，但字体也不显示。 :(
我所说的编码是指文档的实际保存方式。文本编辑器将允许您保存具有不同编码的文档，这很容易导致这些问题。

标签： css pdf font-awesome dompdf

【解决方案1】：

Dompdf 没有正确解析 FontAwesome 样式表，导致它错误地读取字体系列（为什么不post a bug report？）。

您现在可以通过在包含 FontAwesome 样式表后重新定义 fa 类来暂时解决此问题。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  <style type="text/css">
  .fa {
    display: inline;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  </style>
</head>
<body>
  <p><span class="fa fa-envelope"></span> envelope</p>
</body>
</html>

如果您将此样式与官方样式进行比较，您会注意到我更改了显示类型。不支持直到并包括 dompdf 0.7.0 自动计算的宽度，并且任何块元素（块、内联块）都被赋予其容器的 100% 宽度。我已经改变了显示样式，但你可以给它一个固定的宽度，例如width: 1.25em;。我还没有进行足够的测试，无法知道哪一种产生的不良影响最少。

【讨论】：

【解决方案2】：

我已经弄清楚并得出结论。这是您可以用来在 dompdf 中显示字体真棒图标的单行语句。

<span style="font-family: FontAwesome">&#xF156;</span>

【讨论】：

【解决方案3】：

我使用 puppeteer 进行 html 到 pdf 的转换。我遇到了 fontawesome 图标没有上传到 pdf 的同样问题。所以当我使用 slowMo : 时，它就像一个魅力！

const browser = await htmltopdf.launch({headless: true, slowMo: 150});

【讨论】：