这已经被问过几次了，但从来没有像谷歌字体那样精确。
所以一般的想法是：
- 要在画布上绘制 svg，我们需要
<img>先将其加载到元素中。
- 出于安全原因，
<img>内部文件不能发出任何外部请求。
这意味着在将所有外部资源加载到<img>元素之前，您必须将所有外部资源作为 dataURI 嵌入 svg 标记本身。
因此，对于字体，您需要附加一个<style>元素，并用url(...)dataURI 版本替换两者之间的字体的 src 。
谷歌字体嵌入文档，就像你使用的那样，实际上只是 css 文件，它们将指向实际的字体文件。所以我们不仅需要获取第一级 CSS 文档，还需要获取实际的字体文件。
这是一个带注释的和有效的（？）概念证明，用 ES6 语法编写，因此需要现代浏览器，但它可以很容易地转换，因为其中的所有方法都可以多文件化。
/*
Only tested on a really limited set of fonts, can very well not work
This should be taken as an proof of concept rather than a solid script.
@Params : an url pointing to an embed Google Font stylesheet
@Returns : a Promise, fulfiled with all the cssRules converted to dataURI as an Array
*/
function GFontToDataURI(url) {
return fetch(url) // first fecth the embed stylesheet page
.then(resp => resp.text()) // we only need the text of it
.then(text => {
// now we need to parse the CSSruleSets contained
// but chrome doesn't support styleSheets in DOMParsed docs...
let s = document.createElement('style');
s.innerHTML = text;
document.head.appendChild(s);
let styleSheet = s.sheet
// this will help us to keep track of the rules and the original urls
let FontRule = rule => {
let src = rule.style.getPropertyValue('src') || rule.style.cssText.match(/url\(.*?\)/g)[0];
if (!src) return null;
let url = src.split('url(')[1].split(')')[0];
return {
rule: rule,
src: src,
url: url.replace(/\"/g, '')
};
};
let fontRules = [],
fontProms = [];
// iterate through all the cssRules of the embedded doc
// Edge doesn't make CSSRuleList enumerable...
for (let i = 0; i < styleSheet.cssRules.length; i++) {
let r = styleSheet.cssRules[i];
let fR = FontRule(r);
if (!fR) {
continue;
}
fontRules.push(fR);
fontProms.push(
fetch(fR.url) // fetch the actual font-file (.woff)
.then(resp => resp.blob())
.then(blob => {
return new Promise(resolve => {
// we have to return it as a dataURI
// because for whatever reason,
// browser are afraid of blobURI in <img> too...
let f = new FileReader();
f.onload = e => resolve(f.result);
f.readAsDataURL(blob);
})
})
.then(dataURL => {
// now that we have our dataURI version,
// we can replace the original URI with it
// and we return the full rule's cssText
return fR.rule.cssText.replace(fR.url, dataURL);
})
)
}
document.head.removeChild(s); // clean up
return Promise.all(fontProms); // wait for all this has been done
});
}
/* Demo Code */
const ctx = canvas.getContext('2d');
let svgData = '<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>';
// I'll use a DOMParser because it's easier to do DOM manipulation for me
let svgDoc = new DOMParser().parseFromString(svgData, 'image/svg+xml');
// request our dataURI version
GFontToDataURI('https://fonts.googleapis.com/css?family=Pangolin')
.then(cssRules => { // we've got our array with all the cssRules
let svgNS = "http://www.w3.org/2000/svg";
// so let's append it in our svg node
let defs = svgDoc.createElementNS(svgNS, 'defs');
let style = svgDoc.createElementNS(svgNS, 'style');
style.innerHTML = cssRules.join('\n');
defs.appendChild(style);
svgDoc.documentElement.appendChild(defs);
// now we're good to create our string representation of the svg node
let str = new XMLSerializer().serializeToString(svgDoc.documentElement);
// Edge throws when blobURIs load dataURIs from https doc...
// So we'll use only dataURIs all the way...
let uri = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(str);
let img = new Image();
img.onload = function(e) {
URL.revokeObjectURL(this.src);
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
}
img.src = uri;
})
.catch(reason => console.log(reason)) // if something went wrong, it'll go here
<canvas id="canvas"></canvas>