Javascript 字体未应用于图像

我正在尝试使用

d3.js

和

HTML5

将

SVG

转换为

PNG

。当显示图像时，自定义字体将应用于该图像，但当我将图像另存为png时，字体不会应用于该图像。 下面是我的代码

CSS

@font-face {
    font-family: "Calligraffitti";
    font-style: normal;
    font-weight: 400;
    src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("http://fonts.gstatic.com/s/calligraffitti/v7/vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8.woff") format("woff");
}

 $('.savePNG').click(function() { saveSvgAsPng(document.getElementById("treeT"), "tree2.png", 3);
    out.saveSvgAsPng = function(el, name, scaleFactor) {
    out.svgAsDataUri(el, scaleFactor, function(uri) {

      var image = new Image();
      image.src = uri;

      image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);

        var a = document.createElement('a');
        a.download = name;
        a.id        = "download_link";
        a.href = canvas.toDataURL('image/png');
        document.body.appendChild(a);
        a.click();
      }
    });
  }

JS

@font-face {
    font-family: "Calligraffitti";
    font-style: normal;
    font-weight: 400;
    src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("http://fonts.gstatic.com/s/calligraffitti/v7/vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8.woff") format("woff");
}

 $('.savePNG').click(function() { saveSvgAsPng(document.getElementById("treeT"), "tree2.png", 3);
    out.saveSvgAsPng = function(el, name, scaleFactor) {
    out.svgAsDataUri(el, scaleFactor, function(uri) {

      var image = new Image();
      image.src = uri;

      image.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);

        var a = document.createElement('a');
        a.download = name;
        a.id        = "download_link";
        a.href = canvas.toDataURL('image/png');
        document.body.appendChild(a);
        a.click();
      }
    });
  }

---

您将发布的CSS放在哪个文件中？如果它在HTML中，或者是从HTML文件中引用的，那么你就不走运了，因为CSS不会跨文档边界应用。因此，它不会影响单独的SVG文件

理论上，您可以将CSS放在SVG文件中。除了将SVG作为

---

我相信这应该是可行的。

事实上，我没有任何SVG文件，只是使用该函数将文本区域转换为pngNot，对我来说也是可行的。也许只有当字体不是来自URL，而是作为base64内联字符串时，它才有效？