这已经被问了几次，但从来没有真正的精确，因为它关于谷歌的字体。
所以总体思路是：
- 在画布上绘制一个SVG，我们首先需要加载它在
<img>元素。
- 出于安全原因，
<img>内部文档无法提出任何外部请求。
这意味着在将其加载到<img>元素之前，您必须将所有外部资源作为dataURI嵌入到svg标记本身中。
所以对于一个字体，你需要一个<style>元素追加，更换字体的src在url(...)之间，与dataURI版本。
谷歌字体嵌入像你使用的文件实际上只是css文件，然后将指向实际的字体文件。所以我们不仅需要获取一级CSS文档，还需要获取实际的字体文件。
这里是一个注释和工作（？）概念证明，具有ES6语法编写的，所以这将需要一个现代的浏览器，但它可以很容易，因为它所有的方法都可以polyfiled transpiled 。
/*
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.
\t
@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>
你不得不包括在SVG标记为纽带，以数据的URI的字体。 –
我觉得这听起来像是最实际的解决方案，因为经过大量研究，我可以确认它不会让我加载它所需的外部woff文件。这个网站看起来是最好的开始：http://sosweetcreative.com/2613/font-face-and-base64-data-uri – supersan