Impossibile capire la regola CSS antiproiettile @ font-face

Question

Prima di contrassegnarlo come duplicato, leggere i miei dubbi. Ho cercato a fondo sul web (in particolare StackOverflow) & non ho potuto chiarire i dubbi. Questa domanda può sembrare lunga a prima vista, ma contiene questioni cruciali che anche gli altri vogliono sapere.

Sto cercando di ottenere una conoscenza leggermente approfondita nella regola antiproiettile @font-face e le persone là fuori mi stanno confondendo. Per favore suggeriscimi su questo ragazzi. Quindi, ecco l'ultimo codice a prova di proiettile, come suggerito da Font-Spring (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) insieme con il problema di modalità di compatibilità IE9 risolto:

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

L'uno senza la modalità di compatibilità IE9 Fix, anche da Font -Spring (http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), assomiglia a questo:

@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'); 
} 

Attualmente, sto leggendo un libro "The book Of CSS3" di Peter Gasston. Segue la regola antiproiettile con la correzione della modalità di compatibilità IE9 come indicato dalla Molla font. Dice che la regola con una stringa di query ? nella seconda proprietà src è responsabile di IE9 Compat. Correzione della modalità. Ma font-spring detiene la prima proprietà src responsabile di IE9 Compat. Correzione della modalità. Non sono in grado di imparare questa sintassi senza comprenderla completamente.

I miei problemi gravi sono piuttosto ridotti. Prima di tutto voglio sapere se solo il ?#iefix può prevenire l'errore di parsing o potrebbe essere qualcosa come ?iefix (senza #) o potrebbe essere ?xyz o ?#abc. È necessario scrivere esattamente ?#iefix?

secondo,

• non posso sentire quanto questa regola @font-face viene analizzato, come IE8 decide quale delle proprietà src deve essere utilizzato per il carattere eot. E se IE9 non ha problemi con l'analisi anche nella modalità di compatibilità , in che modo deciderà quale formato di font usare? Sarà l'IE9 in modalità compatibilità interrompe il carattere stringa di query url & se non lo è perché no?
• Qualcuno può dirmi se guardo l'intera regola antiproiettile dichiarata sopra, come IE8, IE9 in modalità di compatibilità, IE9 in modalità normale & altri browser lo analizzeranno? In che modo un browser decide tra diversi tipi di carattere da utilizzare se ne supporta la maggioranza. Qual è l'ordine in cui il browser visualizza i valori url e le proprietà src?
• E 'come che un src proprietà da solo, senza alcun valore local() e format() e con un formato corretto eot sarà accettato dal IE8 e non andrà ulteriormente alla prossima src proprietà in cui sono definiti altri formati? O sarà ancora andare al prossimo src proprietà & scaricare i caratteri da lì?
• Se ci sarà una stringa di query (?) nella successiva proprietà src, IE8 (anche IE9 in modalità di compatibilità è considerata) scaricare il font eot due volte? E se non ci sarà la stringa di query , accetterà il carattere eot dalla prima proprietà e non si interromperà o si interromperà & non applicare alcun carattere personalizzato definito anche dalla prima proprietà src?

Inoltre, IE9 in modalità normale supporta il formato eot? non Intende la sintassi a prova di proiettile ancora funzionare se ho appena rimuovere l'intera dichiarazione di stringa di query del tipo:

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */ 
src: url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

non disposta la sopra continuerà a funzionare in tutti i casi possibili? IE6-8 avrà il primo src insieme a IE9 in modalità compatibilità e tutti gli altri browser seguiranno il resto delle regole.

Può la regola di cui sopra suggerita da me lavorare con il valore stesso local() come segue:

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */ 
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Sia in IE8 o IE9 in modalità compatibilità, local() valore sarà farli andare via .. sarebbe IE9 in modalità normale utilizzare eot o woff dalla regola precedente ?? Se si fa uso eot, possiamo fare una piccola modifica al primo src proprietà come questa:

src: url('webfont.eot?#iefix') format('eot'); 

IE9 ignorerà questa struttura in quanto contiene eot e passare in seguito ad utilizzare woff, ho ragione? Inoltre, se ho di nuovo apporta una modifica a questa regola se stesso come questo:

src: url('webfont.eot?#iefix') format('embedded-opentype'); 

Sarebbe IE9 ora utilizzare il formato eot o ancora andare avanti con woff?

Questo è tutto ciò che voglio sapere e sì penso che queste domande abbiano sicuramente bisogno di una risposta.

Answer 1

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff') format('woff'), /* Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

Questo è semplicemente un trucco per aggirare i vari IE * incongruenze, con il primo src a soddisfare IE9, quindi se il vostro spettatore ha questo browser ottiene questo tipo di carattere, il secondo src non sovrascrivere il primo perché IE9 non è in grado di analizzare la stringa 'webfont.eot?#iefix'

Informazioni sul secondo src della regola: questa è la "vecchia" sintassi antiproiettile e si è già familiari con essa. Si prega di notare che, come detto nel post sul blog di Fontspring sulla regola indurita, Microsoft ha corretto il bug in IE9 quando si utilizzavano le modalità di rendering IE7 e IE8 ma in realtà non avevano risolto IE7 e IE8 quindi è ancora necessario questo trucco per questi browser.

Un chiarimento su local(): questo indica al browser di utilizzare un determinato carattere locale (cioè sul pc del visualizzatore della pagina), se il visualizzatore non lo ha installato, quindi non sarà in grado per vedere il font giusto, per maggiori informazioni su questo è possibile controllare questo: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley