ウェブページの印刷やPDF変換の際、Webフォントは適用されますか?
ウェブページの印刷やPDF変換時のWebフォントの適用については、各ブラウザ・ソフトウェアの仕様に依存します。
ブラウザに依っては文字化けするケースがございますが、印刷時にWebフォントではなくシステムフォントで出力することで、文字化けを回避することができるかと存じます。
印刷時にシステムフォントを使用する方法(CSSで記述)
下記の1または2のいずれかの方法をお試し下さい。
1、media属性指定によりCSSファイル単位で分岐
htmlの"link"タグに「media」属性を指定することにより、Webでの表示用と印刷用とでfont-familyを変更します。
<link rel="stylesheet" type="text/css" href="./style.css" media="screen"><!-- Web表示用 -->
<link rel="stylesheet" type="text/css" href="./print.css" media="print"><!-- 印刷用 -->
CSSの記述例)
style.css
@charset "utf-8";
.popjoy{ font-family: 'PopJoyStd-B'; }
print.css
@charset "utf-8";
.popjoy{ font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; }
2. @media指定によりセレクタ単位で分岐
スタイルシート内に@media print{} のセクションを追加することで、印刷用にスタイルの指定を上書きできます。
CSSの記述例)
@charset "utf-8";
.popjoy{ font-family: 'PopJoyStd-B'; }
@media print {
.popjoy{ font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; }
}