4

wicked_pdfを使用してHTMLからPDFを生成し、Herokuにデプロイしています。

これはデプロイするとすべて正常に機能し、@ font-faceを使用してさまざまなフォントを試しましたが、これまでのところ、フォントとして「serif」を使用すると最良の結果が得られます。

私の想定では、wkhtmltopdfはHerokuサーバーの組み込みフォントを使用して「セリフ」をレンダリングしています。これはPDFで見栄えがしますが、さまざまなオペレーティングシステムのブラウザは、「セリフ」に対して異なるフォントをレンダリングします。そのため、HTMLに一致するフォントを見つけてみたいと思います。

Herokuサーバーにインストールされているフォントと、「serif」にマップされているフォントを確認することはできますか？

4

1 に答える 1

3

CSSを使用して必要なフォントを明示的に設定し、さまざまなシステムやブラウザー間で一貫したフォントレンダリングを実現できます。私がこれを行うことを考えることができる2つの方法があります：

1つは、CSSフォントスタイルを指定することです。デフォルトのフォールバックフォントはserifです。たとえば、GoogleFontsからDroidSerifフォントを追加し、それをメインのbodyフォントスタイルとして使用するには、次のようにします。

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<style>
    body {
        font-family: 'Droid Serif', serif;
    }
</style>

Droid Serif最新のすべてのブラウザーに表示され、デフォルトでserifはHerokuになり、古い/単純なWebブラウザーを備えたデバイスに表示されます。欠点は、Herokuがデフォルトのセリフフォントを使用するため、フォントはブラウザでは一方向に見えますが、PDFでは異なって見えることです。

2番目の方法は、フォントをBase64でエンコードし（このツールを使用できます）、CSSに含めることです。

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

これは、最新のすべてのブラウザーでも機能しますが、Herokuでも機能して、一貫したフォントレンダリングを提供するという追加のボーナスがあります。この方法は、ブラウザだけでなく、開発環境やHeroku全体で一貫性が得られるため、特に便利です。CSSでフォントをgit-pushしたり、ローカルパスや絶対パスを混乱させたりする必要がないためです。

于 2013-07-14T19:08:57.943 に答える