Javascript svg到png，带有外部源样式表（谷歌字体）

我正在尝试将svg导出到png，并自动下载png。 我能够用google字体生成svg到png（使用JS将其复制到“canvas”中），并且“复制版本”还可以，但是当我下载文件时，字体会回到默认字体

我尝试了在网上找到的许多想法，但都没有效果<有人有主意吗？
如果有什么关系的话，我正在使用.net

<link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>

<button>Download SVG</button>
<div></div>
<canvas style="visibility: hidden;"  id="canvas"></canvas>

<script>
    var canvas = d3.select("div").append("svg")
        .attr("font-size", "50px")
        .attr("width", 150)
        .attr("height", 150)
        .attr("font-family", "Exo 2")
   var circle = canvas.append("circle")
       .attr("cx", 50)
       .attr("cy", 50)
       .attr("r", 50)
       .text("lalala");
   var text = canvas.append("text")
       .attr("x", 100)
       .attr("y", 100)
       .attr("fill", "green")
       .attr("style", "font-family:'Exo 2';")
       .attr("font-size", "20px")
       .text("lalala");


    var btn = document.querySelector('button');
    var svg = document.querySelector('svg');
    var text = document.querySelector('text');
    var canvas = document.querySelector('canvas');


    function triggerDownload(imgURI) {
        var evt = new MouseEvent('click', {
            view: window,
            bubbles: false,
            cancelable: true
        });
        var a = document.createElement('a');
        a.setAttribute('download', 'svgImage.png');
        a.setAttribute('href', imgURI);
        a.setAttribute('target', '_blank');
        a.dispatchEvent(evt);
    }

    btn.addEventListener('click', function () {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var data = (new XMLSerializer()).serializeToString(svg);
        var DOMURL = window.URL || window.webkitURL || window;
        var img = new Image();
        var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
        var url = DOMURL.createObjectURL(svgBlob);

        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            DOMURL.revokeObjectURL(url);
            var imgURI = canvas
                .toDataURL('image/png')
                .replace('image/png', 'image/octet-stream');

            triggerDownload(imgURI);
        };

        img.src = url;
    });
</script>

下载SVG
var canvas=d3.select（“div”）.append（“svg”）
.attr（“字体大小”，“50px”）
.attr（“宽度”，150）
.attr（“高度”，150）
.attr（“字体系列”、“Exo 2”）
var circle=canvas.append（“圆”）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，50）
.文本（“拉拉”）；
var text=canvas.append（“文本”）
.attr（“x”，100）
.attr（“y”，100）
.attr（“填充”、“绿色”）
.attr（“样式”，“字体系列：'Exo 2'；”）
.attr（“字体大小”，“20px”）
.文本（“拉拉”）；
var btn=document.querySelector（'button'）；
var svg=document.querySelector（'svg'）；
var text=document.querySelector（'text'）；
var canvas=document.querySelector（'canvas'）；
函数触发器下载（imgURI）{
var evt=新建MouseEvent（'单击'{
视图：窗口，
泡泡：错，
可取消：正确
});
var a=document.createElement（'a'）；
a、 setAttribute（'download'，'svgImage.png'）；
a、 setAttribute（'href'，imgURI）；
a、 setAttribute（'target'，'u blank'）；
a、 调度事件（evt）；
}
btn.addEventListener（'click'，函数（）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var data=（新的XMLSerializer（））.serializeToString（svg）；
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svgBlob=newblob（[data]，{type:'image/svg+xml；charset=utf-8'}）；
var url=DOMURL.createObjectURL（svgBlob）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
var imgURI=画布
.toDataURL（'image/png'）
.replace（'image/png'、'image/octet stream'）；
触发器下载（imgURI）；
};
img.src=url；
});

---

在此处输入代码

关于此主题有很多问题，例如，为什么没有一个合适？可能重复