@ font-face sayfanın üstüne ekleme

JavaScript FileReader ve/veya CSS @ font-face ile ilgili bir sorunum var (veya bir HTML DOM sorunu olabilir - emin değilsiniz).
Bir yazı tipi dosyasını masaüstünden sürükleyip tarayıcınızın penceresine sürükleyerek HTML5'den biraz yardım alıp & işaretini sürükleyip Dosya nesnesini alıp işlemeye çalışıyorum. Böyle kafa bakmak en eklenmiş@ font-face sayfanın üstüne ekleme

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

Final CSS: CSS kendisi sorunsuz ekliyordur

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

İşte bunu yapar JavaScript kodu. numaralı sorun, font ailesinin uygulanmadığıdır. Tüm büyüden sonra "myFont" için bazı elemanların font-ailesini ayarlamak için Firebug (veya Chrome eşdeğeri) kullanırım, ancak varsayılan fontu uygular (tahmin ettiğim Times new roman).

Bunu başarmak için yazı tipini yükleyebileceğimi biliyorum (PHP ile), ancak konu bu değil.

Muhtemel soru şurada olabilir: 1. CSS stilini anında eklemek ve yeniden yüklemeden kullanmak mümkün mü (muhtemelen ateş tuğlası ile mümkün ise TRUE)?
2. Javascript getAsDataUrl işlevi tarafından döndürülen (henüz bir görüntü dosyası ile mümkündür) gibi bir henüz yüklenmemiş (yerel?) Kaynağından bir yazı tipi dosyası kullanmak mümkün mü?
Yani, her iki durum da bazı durumlarda mümkündür, o zaman neyi yanlış yapıyorum? (MIME türünü dosyalayabilir miyim? @ font-face öğesinde dikkat edin src parametre "data:" bölüm boş)

kaynak

2012-12-05 matewka

Bu konuda herhangi bir güncelleme var mı? kromda bu bir çekicilik gibi çalışır, ancak itfaiyede değil, yani –

Belki de bu yardımcı olacaktır: 'data: [] [; charset = ] [; base64], ' Eğer belirtilmezse, varsayılan olarak text/plain , karakter kümesi = US-ASCII. (Kısaca, tür ihmal edilebilir ama charset parametresi verilir.) – Eraden

@Eraden, öneriniz için teşekkür ederiz. Bu konuyu uzun zaman önce terk ettim ama yine de bir daha bakmam gereken bir zaman bulmaya çalışacağım. – matewka

Şu an için zamanım yok, denemek için, ama okuduğum gibi

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

oldukça "agresif" karşı-örnek:

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

Ben olacak kod, sorun/size veri uri bir mim zaman desteklemediğini, olmalıdır olabilir denemek ve içine kazmaya geri dönün.

kaynak

2014-12-19 14:29:21

Cevabınız için teşekkürler. Lütfen sorudaki son yorumuma bir göz atın. – matewka

@ font-face sayfanın üstüne ekleme

cevap

İlgili konular