base64圖像中的嵌入式字體

Question

我給了一個帶有一些自定義字體的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 im使用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);


    });

Answer 1

您必須將樣式表嵌入SVG本身，或從外部引用它。 如果單獨呈現SVG，則不會應用常規頁面樣式表。

查閱有關SVG樣式的參考以獲取更多信息。