2012-12-17 12 views
8

Sto sviluppando un tema Tumblr e voglio usare un font che ho su tutti i browser. Perché Firefox non consente le richieste HTTP di altri domini per i font css, in questo momento il font non funziona in Firefox, ma funziona in tutti gli altri browser usando la sintassi standard @ font-face.Codifica dei font Base64 per Tumblr su Firefox

Si è guardato attorno e trovato un suggerimento per usare base64 per codificare il font direttamente nel file css. Cercando di farlo ora ma non funziona. Non ho mai usato questa tecnica prima, quindi potrei semplicemente mancare qualcosa. Sto collegando il foglio di stile dal tema tumblr e assegnando la famiglia di caratteri: futuraBold a determinati elementi.

Ecco ciò che il foglio di stile assomiglia:

@font-face { 
    font-family: “futuraBold”; 
    src: url(“data:font/opentype;base64,BASE64CODE”); 
} 

ho usato l'encoder Base64 qui: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

e caricato un file di font .otf.

Mi manca qualcosa?

+2

Il mio suggerimento è quello di provare [Font Squirrel] (http://www.fontsquirrel.com/fontface/generator) in modalità Expert e selezionare Base64 codifica. Quindi, guarda se non funziona. – Ally

+0

Ad esempio, ho provato Oswald e qui è l'inizio della stringa codificata che mi ha dato: 'src: url (dati: application/x-font-woff; charset = utf-8; base64, ...' – Ally

+0

avete davvero queste citazioni fantasiose ('' ') nel vostro foglio di stile? Dovreste sostituirle con normali virgolette doppie (' "'). –

risposta

2

Tutto ciò è corretto tranne che tu penso che non ti servano virgolette, singole o doppie. Si deve solo andare in questo modo:

@font-face { 
    font-family: futuraBold; 
    src: url(data:font/opentype;base64,BASE64CODE); 
} 

Spero che questo ha aiutato