8

我对 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参数中的“数据：”部分为空）

4

1 回答 1

1

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

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

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

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

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

于 2014-12-19T14:29:21.343 回答