<分区>
我在使用 Google 字体的页面上显示了一个 SVG。
<text> SVG 上的节点很好地继承了 Google 字体。
现在，我正在尝试使用 Blob 转换 SVG .
这有效，除了 <text>使用安装在浏览器计算机上的后备“Verdana”呈现，而不是“Pacifico”，后者是一种动态加载的 Google 字体。
window.onload = function() {
var width = 400;
var height = 100;
var DOMURL = self.URL || self.webkitURL || self;
var data = new XMLSerializer().serializeToString(document.getElementById("test"));
var svg = new Blob([data], { type: "image/svg+xml" });
var url = DOMURL.createObjectURL(svg);
var canvas = document.getElementById("result");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
var img = new Image(width, height);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
}
img.src = url;
}@import url('https://fonts.googleapis.com/css?family=Pacifico');
body {
font-family: Pacifico, Verdana;
font-size: 15px;
}
body * {
font-family: Pacifico, Verdana;
}
#test, #result {
border: 1px solid #eee;
}
h4 {
margin: 2em 0 1em 0;
}<h4>Source SVG</h4>
<svg id="test" width="400px" height="100px" style="font-family: 'Pacifico', 'Verdana'; font-size: 15px;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g xmlns="http://www.w3.org/2000/svg">
<rect fill="#67b7dc" transform="translate(-0.5,-0.5)" width="80" height="100" />
<rect fill="#6794dc" transform="translate(80,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
<rect fill="#6771dc" transform="translate(160,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
<rect fill="#8067dc" transform="translate(240,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
<rect fill="#a367dc" transform="translate(320,0)" transform="translate(-0.5,-0.5)" width="80" height="100" />
<text fill="#fff" transform="translate(20,20)" font-size="25" dy="20">
Some text using font</tspan>
</text>
</g>
</svg>
<h4>Result canvas</h4>
<canvas id="result" />到目前为止，我还没有找到让 Canvas 文本使用自定义字体的方法，如果有任何帮助，我将不胜感激。
附言作为记录，我知道像 fabric 和 canvg 这样的第三方库的存在。他们能够将 SVG 转换为 Canvas 而不会丢失自定义字体。但是，我试图避免不使用任何第 3 方库，以保持轻便。
附言包括 Google 字体的 @import进入<defs><style> SVG 部分没有帮助，即使我们明确定义 @font-face .坦率地说，这不是一个选择，因为我还不知道库将使用什么字体。
P.P.P.S 延迟导出没有帮助，所以这可能也不是时间问题。