DOMPDF生成的PDF中的Google Webfonts [英] Google Webfonts in PDF generated by DOMPDF

问题描述

我在一个页面中使用了两个Web字体，然后使用dompdf将其转换为PDF。我在标题中有这个：

I am using two webfonts in a page that I convert to a PDF using dompdf. I have this in the header:

<link href='http://fonts.googleapis.com/css?family=Signika:600|Roboto+Condensed' rel='stylesheet' type='text/css'>

然后在

body {
  font-family: "Roboto Condensed", sans-serif;
  [ ... ]
}
h1 {
  font-family:'Signika', Arial, Helvetica, sans-serif;
  [ ... ]
}

现在，当我生成PDF时，则h1以 Signika字体显示，但 Roboto Condensed被Helvetica或其他一些标准的sans-serif字体代替。

Now, when I generate the PDF, the h1 is displayed with the "Signika" font, but "Roboto Condensed" is replaced by Helvetica or some other standard sans-serif font.

如果我打开预览文件（即我随后包含在PDF生成脚本中的php页面）中， Roboto Condensed显示为预期的，但没有进入PDF。但是正如我写的那样，PDF中有 Signika，这对我来说有点奇怪。顺便说一句，我还尝试将字体规则直接包含在 p ， div ，<$ c的CSS规则中$ c> li 等，但这不会有任何改变。

If I open the "preview" file (i.e. the php page which I then include in the PDF generation script), "Roboto Condensed" is displayed as expected, but it doesn't make it into the PDF. But as I wrote, "Signika" is there in the PDF, and that's somehow odd to me. BTW, I also tried to include the font-face rule directly in CSS rules for p, div, li etc. but that wouldn't change anything.

有人建议我如何解决该问题吗？

Any suggestions how I could fix that?

编辑/添加：

考虑一下，两种字体之间的区别是Roboto Condensed名称中有一个空格。我想知道是否会引起问题（例如dompdf无法处理这样的字体名称）？但是只要从Google服务器获取字体，我就无法更改。

Thinking about it, a difference between the two fonts is that Roboto Condensed has a space in its name. I wonder if that could cause the problem (i.e. dompdf not being able to handle such a font name)? But I can't change that as long as I am fetching the fonts from the Google server.

推荐答案

我自己找到了解决方案：

I found the solution myself:

正如我在编辑中添加到问题中那样，显然原因是字体家族名称 Roboto Condensed包含一个空格，而dompdf却没有

As I had added to my question in an edit, the reason obviously was that the font-family name "Roboto Condensed" contains a space, which dompdf doesn't seem to like.

我下载了字体，并使用Fontsquirrel上的字体生成器创建了三个版本，并将它们与样式表一起放在我的服务器上：

I downloaded the font, created three versions of it with the font generator on Fontsquirrel and put them on my server, together with this stylesheet:

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('robotocondensed-regular-webfont.woff2') format('woff2'),
         url('robotocondensed-regular-webfont.woff') format('woff'),
         url('RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后，在我的CSS规则中，我使用了新的字体名称<$ c $在字体家族中使用c> roboto_condensedregular ：roboto_condensedregular，无衬线；

Then, in my CSS rules I used that new font name roboto_condensedregular in font-family: roboto_condensedregular, sans-serif;

现在在PDF中也可以使用。

Now it works, also in the PDF.

这篇关于DOMPDF生成的PDF中的Google Webfonts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！