base64 图像中的嵌入字体答案

【问题标题】：Embedded font in base64 imagebase64 图像中的嵌入字体
【发布时间】：2013-10-18 23:39:50
【问题描述】：

我给了一个带有一些自定义字体的 svg（通过 css 的字体嵌入）在浏览器中它工作正常，但如果我尝试从 SVG 制作 base64 编码图像，字体将无法识别。

这是我的代码：

CSS

    svg,text, textPath{
    font-family: 'MyFont';  
    }

@font-face
{
    font-family: MyFont;
    src: src: url(data:application/x-font-ttf;base64,AAEAAAAQA...);
}

JS 我正在使用 RaphaelJS

//set the text's font
t.attr({"font-family": "MyFont"})

//make the snapshot
    var source = new Image();
    $("body").append(source);
    $('body').click(function(){

        // record start time
        var startTime = new Date();

        var svg = $('#paper').html();

        var mySrc = 'data:image/svg+xml;base64,'+Base64.encode(svg);

        //source.src = base64Path + "?" + mySrc.slice(5);
        source.src = mySrc;

        var endTime = new Date();

        console.log(endTime - startTime);


    });

【问题讨论】：

标签： javascript html css svg fonts

【解决方案1】：

您必须将样式表嵌入 SVG 本身，或从外部引用它。如果 SVG 单独呈现，则不会应用一般页面样式表。

查看the reference on SVG styling了解更多信息。

【讨论】：