在SVG中绘制DOM对象时如何在画布中使用Google字体？

Question

根据Mozilla的文档，您可以在画布上(如这 )绘制复杂的HTML。

我想不出的是让Google字体和它一起工作的方法。

参见下面的示例：

​

var canvas = document.getElementById('canvas');
    var ctx    = canvas.getContext('2d');
    
    var data   = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
                   '<foreignObject width="100%" height="100%">' +
                     '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px;font-family:Pangolin">' +
                       'test' +
                     '</div>' +
                   '</foreignObject>' +
                 '</svg>';
    
    var DOMURL = window.URL || window.webkitURL || window;
    
    var img = new Image();
    var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    var url = DOMURL.createObjectURL(svg);
    
    img.onload = function () {
      ctx.drawImage(img, 0, 0);
      DOMURL.revokeObjectURL(url);
    }
    
    img.src = url;

<link href="https://fonts.googleapis.com/css?family=Pangolin" rel="stylesheet">

<div style="font-size:40px;font-family:Pangolin">test</div><hr>
<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>

​

Answer 1

您可以尝试的第一件事是使用Google字体加载器，因为您在浏览器加载字体之前生成svg。

因此，您需要确保加载了字体，然后生成svg/映像

如果这不起作用，您可以在svg中创建文本标记，并为字体字体尝试以下选项