2012-12-05 5 views
8

Ho un problema con JavaScript FileReader e/o CSS @ font-face (o potrebbe essere un problema HTML DOM - non sono sicuro).
Sto trascinando un file di carattere dal desktop e rilasciandolo nella finestra del browser con un piccolo aiuto da HTML5 trascinare & rilasciare, quindi ricevere l'oggetto File e tentare di gestirlo.
Ecco il codice JavaScript che fa questo:aggiunta @ font-face al volo

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

finale CSS allegata alla testa sguardo di come questo:

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

Il CSS si sta aggiungendo senza alcun problema. Il problema è che la famiglia di caratteri non viene applicata. Dopo tutta la magia uso Firebug (o è equivalente a Chrome) per impostare la font-family di alcuni elementi su "myFont" ma applica il font predefinito (Times new roman I guess).

So che posso caricare il font per ottenere questo risultato (con PHP ad es.) Ma non è questo il punto.

La domanda possibile potrebbe essere:
1. È possibile aggiungere lo stile CSS al volo e utilizzarlo senza ricaricare (probabilmente VERO se è possibile con firebug)?
2. È possibile utilizzare un file di font da una risorsa non ancora caricata (local?) Come quella restituita da javascript getAsDataUrl function (TRUE - è possibile con un file di immagine)?
Quindi, entrambe le cose sono possibili in alcune circostanze, allora cosa faccio di sbagliato? (forse file tipo MIME? Si noti che in @ font-face src parametro "data:" la parte è vuota)

+0

eventuali aggiornamenti su questo? in chrome funziona come un incantesimo, ma non in firefox o ie –

+0

Forse questo aiuterà: 'dati: [] [; charset = ] [; base64], ' Se è omesso, il valore predefinito è text/plain ; charset = US-ASCII. (Come una scorciatoia, il tipo può essere omesso ma il parametro charset è fornito.) – Eraden

+0

@Eraden, grazie per il tuo suggerimento. In realtà ho abbandonato questo argomento molto tempo fa, ma cercherò di trovare un po 'di tempo per dare nuovamente un'occhiata al problema. – matewka

risposta

1

Non ho il tempo adesso, per provarlo, ma come ho letto il codice, il problema potrebbe/dovrebbe essere, che non supportano un momento mimo nel uri dati:

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

un piuttosto "aggressivo" contro-esempio:

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

io tornare a provarlo e scavare in esso.

+0

Grazie per la risposta. Si prega di dare un'occhiata al mio recente commento nella domanda. – matewka