Dompdfを使用してHTMLをPDFにエクスポートする際に素晴らしいフォントが表示されない

Dompdfを使用してHTMLページをPDFにエクスポートしています。私は、HTMLファイル自体に表示されるいくつかのフォント驚くばかりのアイコンを使用していますが、結果のPDFでは、アイコンの代わりに疑問符があります。ここでDompdfを使用してHTMLを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>: [email protected]</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>: [email protected]</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>

私はこれをどのように修正すればよいですか？

出典

2016-04-12 Pathros

それはエンコードの問題がある可能性がありますように聞こえます。あなたのHTMLファイルのエンコーディングは何ですか？それは 'utf-8'でなければなりません。そうでない場合は、CDNのawesomeフォントにリンクし、それが修正されているかどうか確認してください。 – timgavin

ええ、 ''で、CDNにリンクしようとしましたが、フォントも表示されません。： – Pathros

エンコーディングとは、ドキュメントが実際にどのように保存されるかということです。テキストエディタでは、異なるエンコーディングでドキュメントを保存できるため、これらの問題が発生しやすくなります。 – timgavin

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;。私は、どれが悪影響が最も少ないかを知るための十分なテストを行っていません。

出典

2016-05-18 02:27:03 BrianS

結論に至りました。ここでは、dompdfの素晴らしいフォントアイコンを表示するために使用できる1行のステートメントを示します。

<span style="font-family: FontAwesome"></span>

出典

2017-01-30 10:27:43

Dompdfを使用してHTMLをPDFにエクスポートする際に素晴らしいフォントが表示されない

答えて

関連する問題