使用自定义字体与wkhtmltopdf [英] use custom fonts with wkhtmltopdf

查看:1549
本文介绍了使用自定义字体与wkhtmltopdf的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在使用wkhtmltopdf生成的PDF中使用自定义字体。
我读到你不能使用google的网络字体和wkhtmltopdf使用truetype .ttf文件。任何人都可以确认?
所以我从google webfont下载了一个.ttf文件并放在我的服务器上,然后使用了字体:

  @ font-face {
font-family:Jolly;
src:url('../ fonts / JollyLodger-Regular.ttf')format('truetype');
}

和字体系列:

 < style type =text / css> 
p {font-family:'Jolly',cursive; }
< / style>

现在,使用Jolly Lodger字体渲染的文本根本不显示

我做错了什么?



PS:我尝试过不同的.ttf文件。 / p>

解决方案

由于是Google Web字体,因此您不需要写 @ font-face 在您的样式表只是使用以下链接标记在您的源代码:

 < link href ='http: /fonts.googleapis.com/css?family=Jolly+Lodger'rel ='stylesheet'type ='text / css'> 

 < style type =text / css> 
p {font-family:'Jolly Lodger',cursive; }
< / style>

可以使用。



,在你的代码中,你定义 @ font-face family as font-family:Jolly; code> p {font-family:'Jolly Lodger',cursive; } 这是错误的,因为它不匹配的字体家族名称。


I am trying to use custom fonts in my PDF generated with wkhtmltopdf. I read that you can't use google webfonts and that wkhtmltopdf uses truetype .ttf file. Can anyone confirm that? So I downloaded a .ttf file from google webfont and put in on my server, then used the font face:

    @font-face {
        font-family: Jolly;
        src: url('../fonts/JollyLodger-Regular.ttf') format('truetype');
    }

and font family:

    <style type = "text/css">
        p { font-family: 'Jolly', cursive; }
    </style>

And now the text that is supposed to render with Jolly Lodger font doesn't appear at all, page is blank.

What am I doing wrong?

PS: I tried with different .ttf files.

解决方案

Since it is a Google Web font you need not to write @font-face in you style sheet just use following link tag in your source code:

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

and

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

will work.

By the way, in your code you are defining @font-face family as font-family: Jolly; and using it as p { font-family: 'Jolly Lodger', cursive; } that is wrong, because it's mismatching font-family name.

这篇关于使用自定义字体与wkhtmltopdf的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆