pdf - 将 SVG 嵌入到带有嵌入字体的 PDF 中

标签 pdf svg fonts pdf-generation tcpdf

我想将 SVG 图像嵌入到 PDF 中,并使用正确的字体呈现 SVG text 元素中指定的字体系列。

我使用的字体是 'Lato' TTF fonts .

这是我用来将字体转换为 TCPDF 的“ native 格式”的代码:

$variants = [
    'Black',
    'BlackItalic',
    'Bold',
    'BoldItalic',
    'Hairline',
    'HairlineItalic',
    'Heavy',
    'HeavyItalic',
    'Italic',
    'Light',
    'LightItalic',
    'Medium',
    'MediumItalic',
    'Regular',
    'Semibold',
    'SemiboldItalic',
    'Thin',
    'ThinItalic',
];

foreach ($variants as $variant) {
    \TCPDF_FONTS::addTTFfont(
        '/var/www/fonts/Lato-' . $variant . '.ttf',
        '',
        '',
        32,
        '/var/www/fonts/output/'
    );
}

这是我用来生成带有嵌入式 SVG 的测试 PDF 的代码:

$svg_content = '<svg width="600px" height="800px">';
foreach ($variants as $key => $variant) {
    $svg_content .= '<text x="30" y="' . ( 30 * ( $key + 1 ) ) . '" fill="#ED6E46" font-size="20" font-family="\'Lato-' . $variant . '\'" text-anchor="start">The quick brown fox jumped over the lazy dog (' . $variant . ').</text>';
}
$svg_content .= '</svg>';

$pdf = new TCPDF();

$pdf->SetPrintHeader(false);
$pdf->SetPrintFooter(false);
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->SetMargins(0, 0, -1, true);
$pdf->SetAutoPageBreak(false, 0);

$pdf->AddPage();

$pdf->AddFont('Lato-Black', '', '/var/www/fonts/output/latoblack.php');

$pdf->ImageSVG('@' . $svg_content, 0, 0, 300, 300, '', $align='', $palign='C', $border=0, false);

$pdf->Output(
    preg_replace('/[^A-Za-z0-9]/', '', $influencer->getName()) . '.pdf',
    'I'
);

我得到的结果是所有文本都以我假设的 Helvetica 字体呈现:

Lato fonts not applied!

如果我在调用 ImageSVG() 之前添加一行,如下所示:

$pdf->SetFont('Lato-Black', '', null, '/var/www/fonts/output/latoblack.php');

然后所有文本都以 Lato-Black 呈现:

All text rendered in Lato-Black

在我看来,字体被很好地嵌入到 PDF 中,但是 SetFont 显然为后续的 PDF 文本元素和 text 元素设置了当前字体在使用此字体的 SVG 图像渲染中。

我想要的行为是在 SVG text 元素上定义的 font-family 属性在 PDF 中得到尊重,因此每一行都使用中提到的字体变体呈现行尾的括号。

我该怎么做?

最佳答案

您可以从以下代码开始,然后向后工作以合并您的更改。

需要明确的是,我并不是特别提倡这种方法,只是说这是一种行之有效的方法,因此应该有助于作为起点。

字体转换器:

$variants = [
    'Black',
    'BlackItalic',
    'Bold',
    'BoldItalic',
    'Hairline',
    'HairlineItalic',
    'Heavy',
    'HeavyItalic',
    'Italic',
    'Light',
    'LightItalic',
    'Medium',
    'MediumItalic',
    'Regular',
    'Semibold',
    'SemiboldItalic',
    'Thin',
    'ThinItalic',
];

foreach ($variants as $variant) {
    \TCPDF_FONTS::addTTFfont(dirname(__FILE__) . '/fonts/Lato-' . $variant . '.ttf', 'TrueTypeUnicode', '', 96);
}

echo 'Done!';

这会将 .php.z.ctg.z 文件放入 /tecnickcom/tcpdf/fonts.

PDF 生成器:

注意 $variants 数组中的不同 font-family 名称:

$variants = [
    'lato',
    'latob',
    'latobi',
    'latoblack',
    'latoblacki',
    'latohairline',
    'latohairlinei',
    'latoheavy',
    'latoheavyi',
    'latoi',
    'latolight',
    'latolighti',
    'latomedium',
    'latomediumi',
    'latosemib',
    'latosemibi',
    'latothin',
    'latothini'
];

$svg_content = '<svg width="600px" height="800px">';

foreach ($variants as $key => $variant) {
    $svg_content .= '<text x="30" y="' . ( 30 * ( $key + 1 ) ) . '" fill="#ED6E46" font-size="20" font-family="\'' . $variant . '\'" text-anchor="start">The quick brown fox jumped over the lazy dog (' . $variant . ').</text>';
}

$svg_content .= '</svg>';

ob_start();

$pdf = new TCPDF();

$pdf->SetPrintHeader(false);
$pdf->SetPrintFooter(false);
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
$pdf->SetMargins(0, 0, -1, true);
$pdf->SetAutoPageBreak(false, 0);

$pdf->AddPage();
//$pdf->AddFont('latoblack', '', dirname(__FILE__) . '/fonts/output/latoblack.php');

$pdf->ImageSVG('@' . $svg_content, 0, 0, 300, 300, '', $align='', $palign='C', $border=0, false);

$pdf->Output('example_001.pdf', 'I');

输出: enter image description here

关于pdf - 将 SVG 嵌入到带有嵌入字体的 PDF 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42941289/

相关文章:

javascript - 如何通过javascript在pdf中切换按钮的颜色

pdf - 将 Foxit PDF Reader 嵌入网页

javascript - 与 SVG 矩形内联的 Div

jquery - 在窗口调整大小时更改字体大小

javascript - 由于字体 : helvetica,粗体和普通文本彼此未对齐

html - 在 EDGE 浏览器中跳转到特定的 PDF 页面

javascript - 填写 PDF 表格

css - 对 SVG 渐变和底层图像的不同响应?

svg - 在 SVG 中缩放圆

Android - unicode 字符显示不正确