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ファイルを試しました。
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; }
として使用していますが、これは間違っています。
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')
は動作するはずです。
上記のように 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ローカルでテストしました。
.ttfファイルまたは.woffファイルがある場合は、次の構文を使用します
@font-face {
font-family: 'Sample Name';
src: url(/PathToFolderWhereContained/fontName.ttf) format('truetype');
}
動作しないttf
は使用せず、フルネーム'truetype'
そして.woffがある場合は'woff'
の形式。私の場合、うまくいきました。
ただし、ベストプラクティスは、条件に一致するものが得られない場合に最適なGoogleフォントAPIへのリンクを使用し、上記の手法を使用することです。
誰かがそれを必要とするかもしれないので、私もここに答えを追加します。
私は 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バージョンを削除すると動作しなくなります。
一撃の価値があるかもしれません。しかし、これがなぜそうなのかについての良いドキュメントを見つけることができません
この質問に対するArman H.のソリューション(フォントをbase64でエンコード)が魅力的であることがわかりました: Google Web FontsおよびPDF wkhtmltopdf
提案されたすべての回避策(実際に機能したもの)を実行した後、私はより簡単な方法に出くわしました:
<style>
@import 'https://fonts.googleapis.com/css?family=Montserrat';
</style>
@import
表記を使用して、フォントを含めることができます。
私は個人的に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>
フォントを取得しない@importを使用して、プロジェクトに.ttfファイルを追加する必要があります