字体不适用于图像
问题描述:
我试图使用d3.js
和HTML5
将SVG
转换为PNG
。显示图像时,会应用自定义字体,但当我将图像保存为png时,字体不会应用于该图像。下面 是我的代码字体不适用于图像
CSS
@font-face {
font-family: "Calligraffitti";
font-style: normal;
font-weight: 400;
src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("http://fonts.gstatic.com/s/calligraffitti/v7/vLVN2Y-z65rVu1R7lWdvyKIZAuDcNtpCWuPSaIR0Ie8.woff") format("woff");
}
JS
$('.savePNG').click(function() { saveSvgAsPng(document.getElementById("treeT"), "tree2.png", 3);
out.saveSvgAsPng = function(el, name, scaleFactor) {
out.svgAsDataUri(el, scaleFactor, function(uri) {
var image = new Image();
image.src = uri;
image.onload = function() {
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
var a = document.createElement('a');
a.download = name;
a.id = "download_link";
a.href = canvas.toDataURL('image/png');
document.body.appendChild(a);
a.click();
}
});
}
答
在哪个文件你把你贴在CSS?如果它在您的HTML中,或者从您的HTML文件引用,那么您运气不佳,因为CSS不适用于跨越文档边界。所以它不会影响单独的SVG文件。
理论上你可以把CSS放在SVG文件中。除了您将一个SVG作为<img>
(Image())加载之外,这是行得通的。由于浏览器中的安全限制,作为<img>
加载的SVG必须是自包含的。他们不能引用外部对象(如字体文件)。
解决方案是将CSS嵌入到SVG文件和中使用dataURI引用字体。
<defs>
<style type="text/css"><![CDATA[
@font-face {
font-family: "Calligraffitti";
font-style: normal;
font-weight: 400;
src: local("Calligraffitti"), local("Calligraffitti-Regular"), url("data:application/font-woff;base64,...font.file.encoded.as.base64...") format("woff");
}
]]></style>
</defs>
我相信这应该有效。
实际上,我没有任何SVG文件,只是使用函数将文本区域转换为png – baig772 2014-10-29 18:58:14
这不起作用,至少在我的尝试中。 – Goose 2015-07-13 18:07:10
不适用于我。 也许它只适用于字体不是来自URL而是作为base64内嵌字符串? – ranbuch 2016-09-07 16:48:46