生成PDF时出现PhantomJS字体渲染问题

时间:2015-11-21 06:39:44

标签: pdf pdf-generation phantomjs adobe

我正在使用2.0版本的PhantomJS,我将HTML渲染为PDF。但是,我的字体看起来很窄,就像胶合在一起一样。我试图给元素提供正确的字母间距属性,但后来我意识到它不是css或字体问题,而是在创建PDF时特有的问题。我没有问题渲染到PNG。

所以这是我使用的原始html(我删除了html标签,它导致编辑器出现问题)。我使用来自Windows字体文件夹的arial.ttf,使用fontsquirrel创建了font-face。

<head>
    <title>Trial</title>
    <style>
        @font-face {
            font-family: 'arialregular';
            src: url('arial-webfont.woff2') format('woff2'),
                 url('arial-webfont.woff') format('woff'),
                 url('arial-webfont.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            letter-spacing: normal;
        }
        body {
            color: #000000;
            font-family: arialregular, sans-serif;
            margin-left: 15px;
            margin-top: 15px;
            font-size: 9pt;
        }
    </style>
</head>
<body>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</body>

我使用rasterize.js创建png和pdf。这是png结果,这是预期的,没有任何问题。

phantomjs.exe rasterize.js my.html my.png a4

Arial font rendered correctly.

正确呈现Arial字体。当我使用

生成pdf时
phantomjs.exe rasterize.js my.html my.pdf a4

它生成pdf而没有任何错误。以下是在Adobe PDF(不是读者)上打开它之后的样子。单击容器时,请注意没有显示字体。

No fonts shown.

当我点击元素进行编辑,但没有进行任何编辑而只是放光标时,它会显示一个嵌入字体。

enter image description here

看起来它试图将字体嵌入到pdf中,但它失败了,因为当字体的大小约为半MB时,PDF的大小为6kb。

当我承诺编辑时,比如写一个空格等,它会向我显示以下错误并退回到Minion Pro。 enter image description here

你会问为什么我不使用Arial,因为它可用,我做了以上所有调试问题:Arial也是如此。所以当我从上面改变css时:

        body {
            color: #000000;
            font-family: "Arial", sans-serif;
            margin-left: 15px;
            margin-top: 15px;
            font-size: 9pt;
            width: 21.5cm;
        }

PNG渲染相同,没有问题。但是,单击时会显示 Arial ,但是当我尝试编辑它时会出现同样的错误,说明 Arial不可用,它会再次回到Minion Pro。 / p>

如何解决此问题?

0 个答案:

没有答案