35

wkhtmltopdfで生成されたPDFでカスタムフォントを使用しようとしています。google webfontsは使用できず、wkhtmltopdfはtruetype.ttfファイルを使用していることを読みました。誰かがそれを確認できますか？そこで、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ファイルで試してみました。

4

10 に答える 10

29

これはGoogleWebフォントであるため@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; }のは間違っています。

于 2012-05-16T07:10:05.837 に答える
21

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

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

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

于 2013-02-13T22:14:21.047 に答える
17

Yardboyが前述したように、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

または単にこの種のウェブサイトを使用する

cssfontsrcプロパティに追加します

   @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でローカルにテストしました。

于 2016-03-04T01:48:52.050 に答える
7

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

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

使用ttfしないでください。フルネームを使用し'truetype'てください。.woffがある場合は'woff'、形式で使用してください。私の場合、それはうまくいきました。

ただし、ベストプラクティスは、Google Fonts APIへのリンクを使用することです。これは、条件に一致しない場合に最適であり、上記の手法を使用して機能します。

于 2013-11-16T19:24:26.930 に答える
4

この質問に対するArmanH.のソリューション（フォントをエンコードするbase64）は魅力のように機能することがわかりました：GoogleWebFontsとwkhtmltopdfを使用したHTMLからのPDF生成

于 2013-06-06T21:16:46.610 に答える
3

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

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

@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バージョンを削除すると機能しなくなります。

一撃の価値があるかもしれません。ただし、これがなぜそうなのかについての適切なドキュメントは見つかりません。

于 2014-08-15T12:59:28.477 に答える
1

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

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

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

于 2016-08-26T08:09:27.080 に答える
1

私は個人的にフォントファミリをに設定する必要がありました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>
于 2018-05-14T14:56:27.440 に答える
0

フォントをフェッチせずに@importを使用するには、プロジェクトに.ttfファイルを追加する必要があります

于 2019-06-24T07:03:26.887 に答える
0

まだ何もうまくいかない場合に備えて：

インストール可能ではなく、スタンドアロンバージョンのwkhtmltopdfを試してください。

同様の問題が発生しましたが、次を使用して解決しました。

https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.mxe-cross-win64.7z

ファイルを解凍し、binフォルダーに移動してコマンドを実行します。

于 2021-01-18T13:47:39.777 に答える