Javascript svg中文本的字体样式在下载时不会传播到png

我正在使用D3.js生成一个svg，包含文本，供用户下载

不幸的是，在下载svg时，当svg转换为画布，然后作为png下载时，应用于svg上文本的字体系列似乎不包括在内

字体样式似乎丢失

有没有一种方法可以应用此字体系列来构建png？

为了将svg作为png下载，我修改了答案

以下是我的流程：

首先，我创建svg

wait d3.xml（`img_templates/${template}}{dimensions}.svg`）
。然后（数据=>{
divsvg.append（data.documentElement）//将svg追加到DOM
}); 

然后，我将文本元素添加到svg中

const quoteText=quoteGroup.append（“文本”）
.attr（“类”、“报价”）
.style（“字体大小，`15px`）
.style（“字体系列”，“Merriweather”）

Merriweather是一个Google字体系列，我将其加载到html页面的头部，如下所示：

下载时，我在svg上执行以下函数

函数下载SVG（svgObj）{
var data=（新的XMLSerializer（））.serializeToString（svgObj）；
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=函数（）{
var canvas=document.createElement（“canvas”）；
canvas.width=this.width；
canvas.height=this.height；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
var imgURI=画布
.toDataURL（'image/png'）
.replace（'image/png'、'image/octet stream'）；
//console.log（imgURI）
触发器下载（imgURI）；
};
img.src=url；
}
函数触发器下载（imgURI）{
var evt=新建MouseEvent（'单击'{
视图：窗口，
泡泡：错，
可取消：正确
});
var a=document.createElement（'a'）；
a、 setAttribute（'download'，'MY_COOL_IMAGE.png'）；
a、 setAttribute（'href'，imgURI）；
a、 setAttribute（'target'，'u blank'）；
a、 调度事件（evt）；
}

当序列化为字符串时，svg显示如下：

“我一个人呆在蒙托克的一个朋友家里，而他在葡萄牙（关于税收和生活质量的事情）。在我早上喝了咖啡和能量饮料后，是时候给植物浇水了。”
不要把大科技公司的解体看作是一种惩罚
标记
2020年8月4日

据我所知，字符串中正确指定了字体系列，但当svg转换为画布，然后转换为png时，它就丢失了。为什么会发生这种情况

---

如果我能提供任何其他信息，请告诉我。非常感谢您的帮助

对于任何发现同样问题的人，我都能找到答案

多亏了朗森先生的建议，我在上找到了凯伊多的以下答案

Kaido的Gfonttodauri方法非常有效。我将其合并到我的代码中，如下所示：

GFontToDataURI（“https://fonts.googleapis.com/css2?family=Merriweather&display=swap")
.然后（cssRules=>{
让fontRules=cssRules.join（'\n'）
d3.选择（“svg”）.append（'defs'）.append（'style'）.attr（'type'，'text/css'）.text（fontRules）
console.log（“添加的天气”）
})
.catch（原因=>console.log（原因））
GFontToDataURI（“https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0，700；1400&display=swap）
.然后（cssRules=>{
让fontRules=cssRules.join（'\n'）
d3.选择（“svg”）.append（'defs'）.append（'style'）.attr（'type'，'text/css'）.text（fontRules）
控制台日志（“添加了roboto”）
})
.catch（原因=>console.log（原因））

因为字体定义不在SVG中，它们在HTML文档中，BLOB无法从中读取它们。这是有道理的，有没有一个地方可以放置字体定义，使BLOB可以访问它们？我还将字体下载为.ttf文件，您可以尝试URL编码（或base64编码）并将其嵌入blob。