Font CSS Face "? #iefix"

Question

Ho una domanda su css @ font-face. Sto usando il seguente codice da questo sito Web (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).

@font-face { 
font-family: 'MyFontFamily'; 
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    url('myfont-webfont.woff') format('woff'), 
    url('myfont-webfont.ttf') format('truetype'), 
    url('myfont-webfont.svg#svgFontName') format('svg'); 
} 

Perché la linea "url('myfont-webfont.eot?#iefix')" hanno "#iefix" alla fine?

Answer 1

È a causa del modo in cui IE8 e sotto interpretano le dichiarazioni dei font. Il normale url('myfont-webfont.eot') porterebbe a 404 errori del server in queste versioni di IE; l'aggiunta di ?#iefix risolve i problemi del server. (E 'per lo stesso motivo ci sono fogli di stile condizionali per IE.)

Secondo Fontspring (direttamente dalla fonte):

Internet Explorer < 9 ha un bug nel parser per l'attributo src. Se si include più di un formato di carattere nello src, IE non riesce a caricarlo e segnala un errore 404. Il motivo è che IE tenta di caricare come un file tutto tra la parentesi di apertura fino alla parentesi di chiusura ultima. Per gestire questo comportamento errato, si dichiara semplicemente l'EOT prima e si aggiunge un singolo punto interrogativo. Il punto interrogativo impedisce a IE di pensare che il resto della stringa sia una stringa di query e carica solo il file EOT. Gli altri browser seguono le specifiche e selezionano il formato di cui hanno bisogno in base alla cascata src e al suggerimento sul formato.

Quindi la parte necessaria è ?; Immagino che lo #iefix sia solo una linea semantica per programmatori che non viene interpretata dal browser in alcun modo particolare.

Ecco alcune ulteriori informazioni se si desidera: https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face.