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)
eventuali aggiornamenti su questo? in chrome funziona come un incantesimo, ma non in firefox o ie –
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
@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