添加@字體面在飛行

我有使用JavaScript的FileReader和/或CSS @字體面臨的一個問題（或者它可能是一個HTML DOM的問題 - 不知道）。
我從桌面拖動一個字體文件，並將其放入瀏覽器的窗口中，從HTML5中拖動一下，然後接收文件對象並嘗試處理它。
這裏是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相同）之後，我將一些元素的font-family設置爲「myFont」，但是它應用了默認字體（我猜想是Times new roman）。

我知道我可以上傳的字體來實現這一點（和PHP例如），但是這不是問題的關鍵。

可能這裏的問題可能是：
1.是否有可能追加對飛CSS樣式，並用它無需重新加載（可能是真實的，如果它是可能的螢火蟲）？
2.是否有可能從尚未上傳（地方？）這樣的資源由JavaScript getAsDataUrl函數返回使用的字體文件（TRUE - 這是可能的一個圖像文件）？
所以，在某些情況下這兩種情況都是可能的，那我該怎麼做呢？（可能是文件的MIME類型？請注意，在@ font-face src參數「data：」部分爲空）

來源

2012-12-05 matewka

這有什麼更新？在Chrome瀏覽器中，它的作用像一個魅力，但不是在Firefox或 –

也許這將有助於：'數據：[;字符集= ] [; base64]，'如果被省略，它默認爲text/plain ;字符集= US-ASCII。（作爲速記，類型可以省略，但提供的字符集參數。） – Eraden

@Eraden，謝謝你的建議。我很久以前就放棄了這個話題，但我會盡量找一些時間再次看看這個問題。 – matewka

我現在沒有時間去試試看，但正如我讀過的你的代碼，該問題可能/應該是，你不支持MIME時間在你的數據URI：

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

一個相當「侵略性」的反例：

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

我會回到嘗試並挖掘它。

來源

2014-12-19 14:29:21

感謝您的回答。請看看我最近對這個問題的評論。 – matewka

添加@字體面在飛行

回答

相關問題