前提
自分でCSSファイルをいじれるページでの解決法。
事象
タイトル通り。
作ったページを印刷→PDFで保存→Adobe Acrobat Readerで展開したときに文字化けした。
WordやブラウザでPDF確認するぶんには文字化けしていない。
原因
ページにメインで使用していたNoto-serif JPのfont-familyがAdobe Acrobat Reader側で対応していなかった。
解決法
・Noto-serif CJK JPの.woffファイルを準備する。
・印刷用のスタイルシート内でfont-familyをNoto Serif Japaneseに変更。
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url('fonts/NotoSerifJP-Regular.woff') format('woff');
}
body {
font-family: 'Noto Serif Japanese', serif;
}
参考サイト：https://www.purakan.co.jp/blog/authorf124e/106.html
@font-face
CSSのアットルールでテキストに適用させるべき外部フォントに関する指定を記述する。
使用するフォントのファイルをDLしてローカルサーバーにアップしておく必要がある。
最後に
今回は案件で.woffファイルと指定があったので.woffファイルを使用しているが、
それぞれの特徴を理解しといたほうがよさそう。
参考サイト：https://reikawatanabe.com/font-file-extension-difference/
今回の内容とは逸れちゃうからまた別の機会にまとめよう…(多分)