Dodawanie @ font-face w locie

Question

Mam problem z JavaScript FileReader i/lub CSS @ font-face (lub może to być problem HTML DOM - nie jestem pewien).
Przeciągam plik czcionki z pulpitu i upuszczam go do okna przeglądarki z niewielką pomocą przeciągnięcia obiektu HTML5 &, a następnie odebrania obiektu Plik i próby obsłużenia go.
Oto kod JavaScript, który robi to:

//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); 

Finał CSS dołączany do głowa wygląd jest tak:

<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> 

Sam CSS jest dołączanie bez żadnego problemu. Problem polega na tym, że rodzina czcionek nie jest stosowana. Po całej magii używam Firebuga (lub jego odpowiednika w Chrome) do ustawienia rodziny czcionek niektórych elementów na "myFont", ale stosuje się domyślną czcionkę (Times New Roman, jak sądzę).

Wiem, że mogę przesłać czcionkę, aby to osiągnąć (np. Z PHP), ale nie o to chodzi.

Możliwe pytanie:
1. Czy możliwe jest dołączanie stylu CSS w locie i używanie go bez ponownego ładowania (prawdopodobnie PRAWDA, jeśli jest to możliwe przy użyciu firebuga)?
2. Czy można użyć pliku czcionki z jeszcze nie przesłanego (lokalnego?) Zasobu, który został zwrócony przez funkcję javascript getAsDataUrl (PRAWDA - jest to możliwe w przypadku pliku obrazu)?
Obie rzeczy są możliwe w pewnych okolicznościach, więc co mam zrobić źle? (Może plik typu MIME? Zauważ, że w części z fontem src część parametru "data:" jest pusta)

Answer 1

Nie mam teraz czasu, aby to wypróbować, ale jak czytałem Twój kod, problem może/powinno być, że nie obsługują czas mime w URI danych:

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

raczej „agresywny” kontrprzykład:

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

będę powrócić do wypróbowania tego i zagłębienia się w to.