javascript - Font is not applied on image -

I am doing D3.js and html5 . When the image is displayed, the custom font is applied to it, but when I save the image as a png, the font does not apply to that image below. My code is below

CSS < / Strong>

  @ 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 ( "Street"), "tree2.png", 3); out.saveSvgAsPng = function (L, name, scaleFactor) {out.svgAsDataUri (L, scaleFactor, function ( uri) {var image = new image (); Fig. src = uri; image.onload = function () {var canvas = document.createElement ( 'canvas'); canvas.width = image.width; canvas.height = image .height; var context = canvas.getContext ( '2-D'); 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 ();}});}  

What have you written in the CSS you posted? If this is in your HTML, or is referred to by your HTML file, then you are out of luck, because CSS does not apply to the document boundaries, so it will not affect a different SVG file.

In principle You can put CSS in the SVG file. It will work to exclude the fact that you have sent a SVG to a and lt; Img & gt; (image ()) are loading as. Img & gt; Due to security restrictions in the browser, SVGs should be filled in a & lt Spartan . They can not reference external objects (such as font files).

Solution To use CSS in your SVG file, you must use DataURI in the context of and font.

& lt; Defs & gt; & Lt; Style type = "text / css" & gt; & Lt ;! [Cdata [@ font-face] {font-family: "caligraphy"; Font style: normal; Font-weight: 400; Source: local ( "Coligrefiti"), local ( "Coligrefiti-regular"), url ( "data: application / font-Vif, base 64, ... Fontkfail.ancoded.askbes -64 ..." ) Format ("WOFF"); }] & Gt; & Lt; / Style & gt; & Lt; / Defs & gt;

I believe this should work.