本文介绍了使用WKHTMLTOPDF库的自定义字体在生成的PDF中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用Laravel 5.1 SnappyPDF包装器,该包装器正在使用WKHTMLTOPDF库.我正在尝试为我的PDF文件添加一些自定义的Google字体,但是这些字体在生成的PDF文件中不起作用.

I am using Laravel 5.1 SnappyPDF wrapper, which is using WKHTMLTOPDF library. I am trying to include some custom google fonts for my PDF file, but those fonts are not working in generated PDF file.

我尝试将字体转换为Base64,还尝试通过绝对URL和相对URL包含字体,还尝试了许多在堆栈溢出时可用的答案,但没有一个对我有用.如何解决此问题.

I tried, converting fonts into Base64 and also tried to include fonts by absolute URL and relative URL, also tried many answers available at stack overflow but none of them worked for me. How to fix this issue.

//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)这是Web浏览器的HTML版本,看上去查找正确,并且字体实现正确

2)这是生成的PDF版本,字体不能正确应用

推荐答案

有多种解决方案可以实现此目的:

There are multiple solutions to accomplish this:

1)如果您使用的是Google字体,请尝试以下操作:使用<link>包含Google字体

1) If you use google font, try below:Use <link> to include google font

<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编码工具编码字体>并在CSS中使用

2) Encode font with Base64 encode tool and use it in css

@font-face {
    font-family: 'YOURFONTFAMILY';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

希望以上是您的解决方案!

Hope one of the above is your solution!

引用:与wkhtmltopdf一起使用自定义字体

这篇关于使用WKHTMLTOPDF库的自定义字体在生成的PDF中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 12:30
查看更多