web-dev-qa-db-ja.com

Google Web FontsおよびPDF wkhtmltopdfを使用したHTMLからの生成

wkhtmltopdf を使用してHTMLファイルをPDF形式で変換します。WebKitのようにPDF行う。

Google Web Fonts を使用して、編集したドキュメントの外観をユーザーがカスタマイズできるようにし、いくつかのフォントから選択できるようにしました。ブラウザでも完璧に機能します。

問題は、そのようなHTMLファイルをPDFとwkhtmltopdfで変換するときにGoogleフォントが動作しないことです。他の人も同じ issue を読んだことがあります。

誰でもこれを修正するのを手伝ってもらえますか？

[〜＃〜] edit [〜＃〜]：CSSで@ font-faceを直接宣言しても機能しません。

htmlcsswkhtmltopdfgoogle-font-api
56
Mathieu Rodic

HTMLをPDF by wkhtmltopdfで変換するには、woffフォントフェイスを避けてください。Google Web Fontsのtruetype形式を使用しますbase64エンコード。

最近、Google Web FontsのGoogle Webフォントを使用しようとしました。ブラウザでは正しく表示されますが、HTMLをPDFに変換すると表示されません。

Webを広範囲に検索した後、ようやくフォントをbase64形式にエンコードするツールを見つけ、@font-faceのCSSも入手しました。

ソリューションを読む here 。

45
Shaharia Azam

簡単な解決策：フォントをBase64でエンコードし、CSSに埋め込みます。

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

FontSquirrelは、 Webfont Generator ;の高度なオプションを使用してこれを行うことができます。 Googleおよびその他のフォントをエンコードできます このツールで 。

私はこのソリューションをpdfkitとwicked_pdfで使用しました。これらはwkhtmltopdfで動作するため、ネイティブwkhtmltopdfでも動作するはずです。

29
Arman H

私はこれと同じ問題を抱えていたので、フォントをダウンロードし、Webサーバーのローカルファイルから次のフォントフェース宣言で実行することで解決しました。

@font-face {
    font-family: 'PT Sans';
    src: url( '/public/inc/fonts/PTS55F-webfont.eot');
    src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
         url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Font Squirrel でこのフォントを見つけることができましたが、走行距離は異なる場合があります。

Google以外のフォントで起こることは、このブラウザが望むと思うフォーマットだけをロードしようとしていることだと思います。ただし、wkhtmltopdfはPDFにwoffフォントを埋め込むことができないため、デフォルトではsans-serifに戻ります。それらすべてを宣言することにより、TrueTypeフォントが含まれます。これはPDFが実際に使用するものです。

また、フォントファミリCSS定義の最初のフォントとして使用するフォントを定義する必要があります。定義しないと、wkhtmltopdfはそれを無視します。

13
Joseph Erickson

@importnotationの使用が機能することをテストしました。

<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>

Django-wkhtmltopdfバージョン2.0.3を使用しています

5
guival

私はこれに約2日間苦労していますが、上記の答えがどれもあなたにとってうまくいかない場合、あなたへの私のアドバイス：

Webサーバーをホストするマシンにフォント（ttf）をインストールし、一般的なフォントで行うのと同じようにcssでそれを必要とします。

body{
    font-family: 'Lato';
}

これでwkhtmltopdfはフォントを含めることができるはずです

2
San Bluecat

印刷スタイルシートで印刷するフォントを宣言していないことを確認してください。

1
Andres Ilich

私の場合、このオプションを追加する必要がありました

--javascript-delay 1000

googleフォントのテキストが表示され始めました。

[wkhtmltopdf 0.12.4（パッチを適用したqtを使用）]

1
xtian