teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

日本語の文字化け対策にmetaタグ追加

2017/10/13 05:32

投稿

shimitei
shimitei

スコア801

answer CHANGED
@@ -14,6 +14,8 @@
14
14
  次のように指定するとPDFにも反映されました。
15
15
 
16
16
  ```html
17
+ <head>
18
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
17
19
  <style>
18
20
  @font-face {
19
21
  font-family: 'MyFont';

1

jsreport-phantom-pdfのフォント指定追記

2017/10/13 05:32

投稿

shimitei
shimitei

スコア801

answer CHANGED
@@ -1,2 +1,26 @@
1
1
  PDF変換はサーバーサイドで行われています。
2
- PDFのフォントが異なるのは、クライアントサイドのブラウザ表示に使われているものと同じフォントがサーバーに無いためでしょう。
2
+ PDFのフォントが異なるのは、クライアントサイドのブラウザ表示に使われているものと同じフォントがサーバーに無いためでしょう。
3
+
4
+ ##追記
5
+
6
+ 参考ページではjsreport-core+jsreport-phantom-pdfを使用してHTMLをPDFに変換しています。
7
+ 試しに動かしてみると確かにfont-family:"メイリオ"のような指定ではPDFのフォントは変わりません。
8
+
9
+ 公式ドキュメントを見ていくと、
10
+ [https://jsreport.net/learn/phantom-pdf](https://jsreport.net/learn/phantom-pdf)
11
+ フォントを指定するにはWebフォントを使いなさいとありました。
12
+ [https://jsreport.net/blog/fonts-in-pdf](https://jsreport.net/blog/fonts-in-pdf)
13
+
14
+ 次のように指定するとPDFにも反映されました。
15
+
16
+ ```html
17
+ <style>
18
+ @font-face {
19
+ font-family: 'MyFont';
20
+ src: url(https://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff');
21
+ }
22
+ body {
23
+ font-family: MyFont;
24
+ }
25
+ </style>
26
+ ```