firefox @ font-face fallisce con fontawesome

Question

Sto utilizzando il font FontAwesome su un'applicazione OSS Sono in esecuzione e non riesco a superare il carattere disinfettante di Firefox.

I file vengono tutti distribuiti nello stesso dominio, i percorsi sono corretti e sto utilizzando il css ufficiale di FontAwesome che funziona in Firefox quando viene servito tramite il loro sito e i documenti locali.

Quindi mi manca qualcosa di semplice.

in diretta url: https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 

sono esempi di errori di Firefox quando si tenta di correggere questo via dev. Ho provato a fare percorsi root completi/statici/font e relativi al css ../font/ e fallisce sempre con questi errori per me.

Tutto funziona in Chrome e così via. Sembra solo che Firefox mi detesti. Ho cercato tra le altre risposte e ho ottenuto l'intera serie di caratteri.

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

Grazie per eventuali suggerimenti.

Answer 1

A) Sei sicuro che il tuo server abbia i tipi di mime impostati per eot/woff/ttf/svg ?? B) Sembra che tu stia correndo su un problema con EOT. ciò potrebbe essere spiegato dal fatto che Firefox non supporta EOT; usa WOFF e TTF. C) Hai provato a eseguire il debug utilizzando Firebug o gli strumenti di sviluppo nativi di Firefox? D) Puoi pubblicare il tuo (rilevante) CSS e HTML?

Answer 2

Grazie, questo era un problema in due parti.

La seconda parte viene prima. Il css di esempio di fontawesome.scss utilizza le virgolette singole attorno ai percorsi dei vari formati di carattere. Quando ho eseguito il mio builder scss (pyscss) su di loro, li ha spogliati. Dovevano essere doppie virgolette.

Poiché non c'erano virgolette, FF non è riuscito a analizzare il bit src: url (...). Dal momento che ha fallito che aveva solo il src: ..eot che è pensato per IE e non ha funzionato in FF.

Cambiare le virgolette alle virgolette rende tutto felice.

Quindi questo è colpa mia se uso pyscss e il suo parser ha finito per rompere la sintassi per Firefox.

Grazie Matt per avermi aiutato a guardare più da vicino.

Answer 3

Nel mio caso è stato sufficiente per mettere file .eot/ .woff/Svg/ .ttf nello stesso file * .war come altri contenuti statici (css, png ecc) è collocato. Sembra che FF e IE abbiano trovato pericoloso scaricare file di font da altri server.

Answer 4

Ho riscontrato lo stesso problema su uno dei siti Web dei miei clienti.

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg'); 
} 

Quanto sopra ha funzionato in firefox. Quello sotto non ha funzionato.

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg); 
} 

Risulta che gli specificatori di formato devono essere quotati come il formato ('svg').Alcuni dei fogli di stile CSS forniti dai siti non citano gli specificatori di formato. Ho sperimentato il percorso con virgolette singole e doppie e questo non ha fatto alcuna differenza. Quindi posso dire che è il problema con gli specificatori di formato non quotati piuttosto che con i percorsi double/single quoted.

Answer 5

So che arriverà tardi, ma l'opzione migliore è usare font-awesome dal CDN. Difficilmente incontrerai questo tipo di errore se lo fai.

Se si fa riferimento al tipo di carattere da un file esterno, commentare le righe:

@font-face { 
 
    font-family: FontAwesome; 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot"); 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg"); 
 
    font-weight: 400; 
 
    font-style: normal 
 
}

e utilizzare il collegamento dalla CDN nella testa invece

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
</head

e sarebbe bello andare.