字体不适用于图像

我试图使用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"); 
}

$('.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(); 
     } 
    }); 
    }

来源

2014-10-28 baig772

在哪个文件你把你贴在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>

我相信这应该有效。

来源

2014-10-29 03:27:28

实际上，我没有任何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

字体不适用于图像

回答

相关问题