2016-09-07 11 views
0

画面とは別のフォントを印刷したい 残念ながら、Google Chromeの印刷プレビュー(他のブラウザでも使用可能)ではフォントが読み込まれず、テキストは表示されません。 もう一度試してみると、フォントフェイスが読み込まれた後、Google Chromeの印刷プレビューにテキストが表示されます。Chromeの印刷プレビューで@mediaが読み込まれないfont-faceを印刷する

ここで問題を再現することができます。 (nb:フィドルではフォントのURLは存在しませんが、少なくともプレビューはテキストを 'serif'として表示する必要があります)。

すべての@mediaの印刷フォントフェースのプリロードを強制するよりも優れた解決策がありますか?

問題は、Google Chromeのすべてのバージョンに= 53

<を発生し、私はこのコードを使用:私達はちょうど経験した後

@media only print { 
    @font-face { 
     font-family: "Computer Modern"; 
     src: url('/fonts/cm/cmunrm.otf'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

https://jsfiddle.net/72bsf1n0/

答えて

1

ちょうどグーグル経由でこの質問を見つけました同じ問題。悲しいことに、11ヶ月間無回答で行ってしまったので、これはあなたと他の人を助けるでしょう。

Chromeがカスタムフォント「オンデマンド」を読み込んでいるようです。したがって、フォントがページ上でまだ使用されていない場合は、最初の「印刷プレビュー」にはまだフォントがありません。後続のフォントには印刷プレビューがあります。タイミングの問題がある可能性があります。

解決策の1つは、通常のページの印刷フォントも使用することです。

@font-face { 
    font-family: "Computer Modern"; 
    src: url('/fonts/cm/cmunrm.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 

@media only print { 
    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

.printfont { 
    font-family: "Computer Modern", serif; 
} 

https://jsfiddle.net/72bsf1n0/8/

+0

ソリューションは、2つの注意点があります/あなたはクロームが本当にフォント2をダウンロードしたい場合は、フォントのテキストを表示するには1必要/これは、すべての「画面」ページの重量増加を作成します。 –

関連する問題