将 SVG 转换为 PNG 时包括字体

Question

我正在尝试生成一些 SVG 并允许我网站的用户将这些 SVG 下载为 PNG。
阅读本文后，我将所有外部图像都包含在下载的 PNG 中。
现在我试图让 PNG 上的字体正确。这似乎回答了这个问题，所以我补充说：

<defs>
    <style type="text/css">
        @font-face {
            font-family: Parisienne;
            src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
    </style>
</defs>

.....base64 编码的 woff2 字体在哪里。然后在文本中使用它，如下所示：

<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>

字体在浏览器中正确显示（我没有在我的操作系统上安装它），但是它仍然没有包含在 PNG 中。
我是否必须向我从第一个链接使用的脚本添加一些额外的处理？
谢谢。

--编辑--
我被要求提供一个完整的例子，这里是：

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: Parisienne;
        src: url('data:application/font-woff;charset=utf-8;base64,.....')
      }
    </style>
  </defs>

  <rect width="300" height="500" fill="#222"/>
  <text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>

我没有添加 base64 编码字体，因为它太大了。但是您可以对您喜欢的任何字体进行编码并替换....... 我正在使用Parisienne。
这是使用实际字体工作的 jsfiddle：https ://jsfiddle.net/z8539err/ 在我的浏览器中，这是输出：

在使用上面的下载脚本后，我最终会得到：

Answer 1

我可以使用以下代码将字体包含在 png 本身中，试试看

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );


img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );


//open image 
window.location.href=canvas.toDataURL( "image/png" );
};

https://jsfiddle.net/user3839189/hutvL4ks/1/