Pat*_*ros 1 css pdf dompdf font-awesome
我正在使用 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>
我该如何解决？
Dompdf 没有正确解析 FontAwesome 样式表，导致它错误地读取字体系列（为什么不发布错误报告？）。
您现在可以通过fa在包含 FontAwesome 样式表后重新定义类来解决此问题。
<!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;. 我还没有做足够的测试来知道哪一个导致的不利影响最少。