我有 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);
附加到 head 的最终 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,可能是真的)?
2. 是否可以使用尚未上传的(本地?)资源中的字体文件,例如 javascript getAsDataUrl 函数返回的字体文件(正确 - 可以使用图像文件)?
那么,在某些情况下这两种情况都是可能的,那么我做错了什么? (可能是文件 MIME 类型?注意在@font-face src 参数中“data:”部分是空的)
最佳答案
我现在没有时间尝试一下,但在我阅读了您的代码后,问题可能/应该是您不支持数据 uri 中的 mime 时间:
src: url("data:;base64;Ahs5hD3..."
一个相当“激进”的反例:
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRg
我会回去尝试并深入研究它。
关于javascript - 即时添加@font-face,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13733088/