web-dev-qa-db-ja.com

wkhtmltopdfでカスタムフォントを使用する

Wkhtmltopdfで生成されたPDF。 google webfontの.ttfファイルをサーバーに配置し、フォントフェイスを使用しました。

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

およびフォントファミリー：

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

そして今、Jolly Lodgerフォントでレンダリングされるはずのテキストはまったく表示されず、ページは空白です。

私は何を間違えていますか？

PS：さまざまな.ttfファイルを試しました。

cssfontswkhtmltopdf
29
fkoessler

Google Webフォントであるため、スタイルシートに@font-faceを記述する必要はありません。ソースコードで次のリンクタグを使用するだけです。

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

そして

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

働くでしょう。

ところで、あなたのコードでは@font-faceファミリーをfont-family: Jolly;として定義し、それをp { font-family: 'Jolly Lodger', cursive; }として使用していますが、これは間違っています。

20
Daljit

IISを使用してWebラッパーからwkhtmltopdfを呼び出すことに間違いはありません。そのため、一部の人々はそれが彼らのために働くと言っています。彼らはおそらくコマンドラインからwkhtmltopdfを呼び出していますが、その場合はCSS URL（）の相対リンクを解決できますが、snappyなどから呼び出す場合は、たとえばURL('http://localhost/myfolder/fonts/JollyLodger-Regular.ttf')代わりに。

CSS URL（）タグ内の相対リンクを適切に解決できないことは、wkhtmltopdf 0.11.0_rc1では壊れているように見えますが、以前のバージョンでは問題なく動作する場合があります。背景画像を呼び出すときなど、他のCSS URL（）タグでも同じ問題が発生します-ファイルの場所の解決が壊れています。興味深いことに、画像の場合、_<IMG SRC=>_を使用すると、相対パスが提供されていても、0.11.0_rc1はファイルを見つけることができます。問題は、CSS内のURL（）タグに限定されているようです。

EDIT：パス内のすべてのforwardスラッシュで_file:///_を使用すると、機能することがわかりました。言い換えれば、URL('file:///D:/InetPub/wwwroot/myfolder/fonts/JollyLodger-Regular.ttf')は動作するはずです。

18
Bezinga

上記のように by ヤードボーイ CSSでTrueTypeフォントをエンコードするbase64がうまく機能することがわかりました。しかし、私はいくつかの追加の洞察を共有したかった。

4つのカスタムフォントを使用しており、すべて一意の名前が付けられています'Light''Medium'など。

私はopensslツールキットを使用してbase64エンコードを行い、良好な結果を得ています。しかし、代わりに fontsquirrel を使用することもできます。他のすべてのフォントタイプ（'woff''otf' ..）。 truetypeの使用が不可解にしか機能しないことがわかりました。

ファイルをエンコードし、出力をトリミングしてクリップボードに追加します

openssl base64 -in bold.ttf | tr -d '\n' | pbcopy

Windowsでは、opensslをインストールしてパスに追加する必要があります

openssl base64 -in bold.ttf | tr -d '\n' | clip

または単純に この種のWebサイト を使用します

CSSフォントsrcプロパティに追加

   @font-face {
      font-family: 'Bold';
      font-style: normal;
      font-weight: normal;
      src: url(data:font/truetype;charset=utf-8;base64,BASE64...) format("truetype");
    }

レンダリングされた出力は、wkhtmltopdfバージョンとフレーバーに依存します。私たちのサーバーはDebianを実行しており、OSXで開発しているため、VMローカルでテストしました。

10
tgk

.ttfファイルまたは.woffファイルがある場合は、次の構文を使用します

@font-face {
   font-family: 'Sample Name';
   src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
   }

動作しないttfは使用せず、フルネーム'truetype'そして.woffがある場合は'woff'の形式。私の場合、うまくいきました。

ただし、ベストプラクティスは、条件に一致するものが得られない場合に最適なGoogleフォントAPIへのリンクを使用し、上記の手法を使用することです。

4
ProgrammingNinja

誰かがそれを必要とするかもしれないので、私もここに答えを追加します。

私は Rotativa を使用してきましたが、これはwkhtmltopdfに基づいており、最終的に使用したのは次のとおりです。

@font-face {
    font-family: "testfont";
    src: url("/UI/Fonts/609beecf-8d23-4a8c-bbf5-d22ee8db2fc9.woff") format("woff"),
         url("/UI/Fonts/1cd9ef2f-b358-4d39-8628-6481d9e1c8ce.svg#1cd9ef2f-b358-4d39-8628-6481d9e1c8ce") format("svg");
}

...そして、RotativaがSVGバージョンを採用しているようです。それらを並べ替えても動作しますが、SVGバージョンを削除すると動作しなくなります。

一撃の価値があるかもしれません。しかし、これがなぜそうなのかについての良いドキュメントを見つけることができません

3
Arve Systad

この質問に対するArman H.のソリューション（フォントをbase64でエンコード）が魅力的であることがわかりました： Google Web FontsおよびPDF wkhtmltopdf

2
Yardboy

提案されたすべての回避策（実際に機能したもの）を実行した後、私はより簡単な方法に出くわしました：

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

@import表記を使用して、フォントを含めることができます。

0
guival

私は個人的にdivにフォントファミリを設定する必要がありました（最初はspanが必要でした）

<style>
@font-face {
    font-family: 'CenturyGothic';
    src: url("fonts/century-gothic.ttf") format('truetype');
}

.title {
    font-family: 'CenturyGothic', sans-serif;
    font-size: 22pt;
}
</style>

...

<div class="title">This is Century Gothic</div>
0
Benoit Duffez

フォントを取得しない@importを使用して、プロジェクトに.ttfファイルを追加する必要があります

0
ITbug