即时添加@ font-face

Question

我有一个JavaScript FileReader和/或CSS @ font-face的问题(或者它可能是一个HTML DOM问题 - 不确定).
我正在从桌面拖动一个字体文件并将其放入浏览器的窗口,只需一点点HTML5拖放,然后接收File对象并尝试处理它.
这是执行此操作的JavaScript代码:

//getting the File object
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    //most important thing here - appending style into HEAD (jQuery)
    $('head').append('<style type="text/css">@font-face { font-family:"myFont";
    src: url("'+contents+'"); }</style>');
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

//read file
reader.readAsDataURL(file);

附加到头部的最终CSS 看起来像这样:

<style type="text/css">
    @font-face {
        font-family: "myFont";
        src: url("data:;base64;Ahs5hD3..."); // here come's the URL of 'cached' font. A lots of letters and digits
    }
</style>

CSS本身没有任何问题.问题是不应用font-family.在整个魔法之后,我使用Firebug(或它的Chrome等价物)将某些元素的font-family设置为"myFont",但它应用默认字体(Times new roman我猜).

我知道我可以上传字体来实现这一点(例如PHP),但这不是重点.

这里可能的问题可能是:
1.是否可以动态附加CSS样式并在不重新加载的情况下使用它(如果可能使用firebug,则可能为TRUE)？
2.是否可以使用来自尚未上传的(本地？)资源的字体文件,例如javascript getAsDataUrl函数返回的字体文件(TRUE - 可以使用图像文件)？
所以,在某些情况下这两件事都是可能的,那么我做错了什么？(也许是文件MIME类型？注意在@ font-face src参数中"data:"部分为空)

Answer 1

我现在没有时间尝试一下，但是当我阅读了您的代码时，问题可能/应该是您的数据 uri 中不支持 mime 时间：

 src: url("data:;base64;Ahs5hD3..."

一个相当“激进”的反例：

src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg

我会回去尝试并深入研究它。