使用 WKHTMLTOPDF 库的自定义字体在生成的 PDF 中不起作用
Custom fonts not working in Generated PDF using WKHTMLTOPDF Library
我正在使用 Laravel 5.1 SnappyPDF 包装器,它使用 WKHTMLTOPDF
库。我正在尝试为我的 PDF 文件包含一些自定义 google 字体,但这些字体在生成的 PDF 文件中不起作用。
我尝试过,将字体转换为 Base64
,还尝试通过绝对 URL 和相对 URL 包含字体,还尝试了堆栈溢出时可用的许多答案,但 none 他们为我工作。如何解决这个问题。
//Calling fonts
@font-face {
font-family: Roboto Condensed;
src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}
@font-face {
font-family: 'Open Sans Semi Bold Italic';
src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}
//implenting fonts
.report-page2-col-wrapper .col-heading{
font-family:"Open Sans Semi Bold Italic";
font-size:12pt;
line-height:17pt;
}
查看屏幕截图的差异
1) 这是网络浏览器 HTML 版本,查找和字体实现正确
2) 这是生成的 PDF 版本,字体应用不正确
有多种解决方案可以实现此目的:
1) 如果您使用 google 字体,请尝试以下操作:
使用 <link>
包含 google 字体
<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>
使用<style>
应用字体效果
<style type = "text/css">
p { font-family: 'YOURFONTFAMILY'; }
</style>
2) 用 Base64 encode tool 编码字体并在 css
中使用
@font-face {
font-family: 'YOURFONTFAMILY';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
希望以上之一是您的解决方案!
已参考:use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf
除了AddWeb,你还要添加到HTML header META with unicode information
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
我正在使用 Laravel 5.1 SnappyPDF 包装器,它使用 WKHTMLTOPDF
库。我正在尝试为我的 PDF 文件包含一些自定义 google 字体,但这些字体在生成的 PDF 文件中不起作用。
我尝试过,将字体转换为 Base64
,还尝试通过绝对 URL 和相对 URL 包含字体,还尝试了堆栈溢出时可用的许多答案,但 none 他们为我工作。如何解决这个问题。
//Calling fonts
@font-face {
font-family: Roboto Condensed;
src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}
@font-face {
font-family: 'Open Sans Semi Bold Italic';
src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}
//implenting fonts
.report-page2-col-wrapper .col-heading{
font-family:"Open Sans Semi Bold Italic";
font-size:12pt;
line-height:17pt;
}
查看屏幕截图的差异
1) 这是网络浏览器 HTML 版本,查找和字体实现正确
2) 这是生成的 PDF 版本,字体应用不正确
有多种解决方案可以实现此目的:
1) 如果您使用 google 字体,请尝试以下操作:
使用 <link>
包含 google 字体
<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>
使用<style>
应用字体效果
<style type = "text/css">
p { font-family: 'YOURFONTFAMILY'; }
</style>
2) 用 Base64 encode tool 编码字体并在 css
中使用@font-face {
font-family: 'YOURFONTFAMILY';
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}
希望以上之一是您的解决方案!
已参考:use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf
除了AddWeb,你还要添加到HTML header META with unicode information
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">