web-dev-qa-db-ja.com

helveticaフォントがwkhtmltopdfで機能しない

PDFの作成中にHelveticaフォントを使用しようとしていますが、フォントがPDFに反映されません。

私はいくつかのグーグルをやって、いくつかの解決策を見つけましたが、どれも実行可能ではありません。

試行されたソリューション1

私はここで同様のものを見つけました: フォントの問題

向こうで言及された最後のソリューションを試しました

回避策は、cssでdefine @ font-faceにして、wkhtmltopdfでアクセスできる外部ホストへのsrcリンクを作成することです。

しかし、解決策は機能していません。

Tried Solution 2 google font apiも使用しようとしましたが、結果はまだ機能しません。 helveticaフォント

ここに例があります カスタムフォントの例

Tried Solution 3 cssプロパティ@pageを使用して試してみました。しかし、それも機能していません。

実行可能なソリューションのアプローチは何ですか。

25
Padmalochan

wkhtmltopdfのフォントの問題を修正する最も簡単な方法は、フォントをBase64エンコードして( このツールを使用できます )、CSSに含めることです。

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

これはすべてのフォント(Googleフォントを含む)で機能し、さまざまなマシンやオペレーティングシステム間でのクロスプラットフォーム互換性を保証します。

29
Arman H

私の場合、Google Fontsからフォントをロードできませんでした。そして、base64化されたバイナリをCSSファイルに入れることは、私には少し(大体韓国語のタイプは数メガバイトです)のようです。マシンで使用する必要があるフォントをインストールすることをお勧めします。 Ubuntuの場合は、Googleフォントからフォントファイルをダウンロードして$HOME/.fontsディレクトリにコピーし、コマンドラインでfc-cacheコマンドを実行してフォントリストを再構築するだけです。

$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv

Railsアプリケーションの場合、シンボリックリンクできます

$ ln -s /your/app/root/assets/fonts ~/.fonts

次に、使用可能なすべてのフォントを一覧表示できます。

$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....
10
baxang

争点に追加するには、Linuxでwkhtmltopdf 0.12.1 (with patched qt)を使用してこれがうまくいきました:

@font-face {
    font-family: dejaSansMono;
    src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
} 

つまり、.ttfへのパスを指定します。フォントファミリ、フォントファミリに名前を付けるだけでは、ブラウザで機能しても機能しませんでした。

GoogleのPT Sansでも同じ問題がありました。私にとってうまくいったのは次のプロセスでした:

  1. グーグルからPT Sansをダウンロードして、それを- fontsquirrel ジェネレーターで実行します
  2. @ font-face(私はttfのみを使用しました)をcssに配置します(私の場合はphpファイルのhtmlヘッドにありました)

注意私はbase64を使用せず、期待どおりに機能したことに注意してください。

それが役に立てば幸い

1
user3281817

linux(x64)ユーザー向けのbaxangs回答の拡張:/ usr/share/fonts/font-folder/font-nameにttfフォントファイルをインストールします

そして、cssファイルでfc-listにリストされているフォント名を使用します。@ font-faceを使用する必要はありません。cssでフォント名を使用するだけです。

例Verdana.ttf ======

ローカルマシンからサーバーに/usr/share/fonts/Verdana/Verdana.ttfにコピーします

フォントリストを取得するためのfc-list(おそらくVerdanaになります)

次に、cs P {font-family: 'Verdana'}で使用します

以上です!修正するまでに少し時間がかかりました。

1
Khallouki

HTMLからPDFwkhtmltopdfで変換するには、woffフォントを使用しないようにします。 base64エンコードでGoogle Web Fontsのtrutype形式を使用します。

最近、Google Web Fontsからgoogle web fontを使用しようとしました。しかし、ブラウザでは正しく表示されますが、HTMLをPDFに変換すると表示されません。

その後、ようやくウェブからたくさん検索した後、フォントをbase64エンコード形式にエンコードするツールを見つけ、CSS @ font-faceも取得しました。

0
Shaharia Azam