在页面中动态添加@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样式自己追加没有问题。但问题是字体族并未被应用。在整个过程中，我使用Firebug（或其Chrome同等版本）将一些元素的字体族设置为“myFont”，但它应用了默认字体（我猜是Times New Roman）。我知道我可以上传字体以实现此目的（例如使用PHP），但这不是重点。

可能的问题如下：
1.是否可能在不重新加载的情况下即时追加CSS样式并使用它（如果Firebug能做到，则可能为TRUE）？
2.是否可能使用尚未上传的（本地？）资源中的字体文件，例如通过javascript返回的getAsDataUrl函数（TRUE-对于图像文件，这是可能的）？
因此，在某些情况下，这两件事都是可能的，那么我做错了什么？（也许是文件MIME类型？请注意，在@font-face src参数中，“data:”部分为空）。

- matewka

---

有关此事有任何更新吗？在Chrome中这很顺利，但在Firefox或IE中却不行。 - Bruno Schäpper

也许这会有所帮助：data:[<MIME-type>][;charset=<encoding>][;base64],<data> 如果省略了<MIME-type>，则默认为text/plain;charset=US-ASCII。（作为一种简写，可以省略类型但提供charset参数。） - Eraden

@Eraden，谢谢你的建议。实际上我很久以前就放弃了这个话题，但我会尽力找时间再次研究这个问题。 - matewka

Answer 1

我现在没有时间去尝试，但是我已经阅读了你的代码，问题可能是你的数据URI不支持MIME类型：

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

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

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

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

- Ádám László Rocska

---

谢谢你的回答。请看一下我在问题中最近发表的评论。 - matewka