Ich kann die CSS-Regel kugelsicher @ font-face nicht verstehen

Question

Bevor Sie dies als Duplikat markieren, lesen Sie bitte meine Zweifel. Ich suchte gründlich im Internet (insbesondere stackoverflow) & konnte die Zweifel nicht beseitigt werden. Diese Frage mag auf den ersten Blick lang erscheinen, enthält aber wichtige Fragen, die andere ebenfalls wissen möchten.

Ich versuche, ein wenig tiefes Wissen in der kugelsicheren @font-face Regel zu gewinnen und die Leute da draußen verwirren mich. Bitte schlage mich auf diese Jungs vor. So, hier ist die neueste kugelsicher Code als von Font-Spring vorgeschlagen (http://blog.fontspring.com/2011/02/further-hardening-of-the-bulletproof-syntax/) zusammen mit dem Kompatibilitätsmodus Ausgabe IE9 gelöst:

@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 */ 
} 

Das eine ohne das IE9 Kompatibilitätsmodus Fix, auch durch Font -Spring (http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), sieht wie folgt aus:

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

Derzeit bin ich von Peter Gasston ein Buch "The book Of CSS3" zu lesen. Es folgt die kugelsichere Regel mit IE9 Kompatibilitätsmodus beheben, wie von der Font-Spring angegeben. Er sagt, dass die Regel mit einer Abfragezeichenfolge ? in der zweiten src Eigenschaft für IE9 Compat verantwortlich ist. Modus reparieren. Aber, Font-Feder hält die erste src Eigenschaft verantwortlich für IE9 Compat. Modus reparieren. Ich bin nicht in der Lage, diese Syntax zu lernen, ohne sie vollständig zu verstehen.

Meine ernsten Probleme sind eher kleiner. Zuerst möchte ich wissen, ob nur die ?#iefix den Parsing-Fehler verhindern kann oder es könnte etwas wie ?iefix (ohne) oder es könnte ?xyz oder ?#abc sein. Ist es notwendig, genau ?#iefix zu schreiben?

Zweitens

• Ich kann nicht das Gefühl, wie diese @font-face Regel analysiert wird, wie IE8 entscheidet, welche der src Eigenschaften für eot Schriftart verwendet werden soll. Und wenn IE9 auch im Kompatibilitätsmodus keine Probleme beim Parsen hat, wie wird es entscheiden, welches Font-Format verwendet werden soll? Will der IE9 im Kompatibilitätsmodus auf Query String Schriftart URL & brechen, wenn nicht dann warum nicht?
• Kann mir jemand sagen, wenn ich mir die ganze kugelsichere Regel oben anschaue, wie IE8, IE9 im Kompatibilitätsmodus, IE9 im normalen Modus & andere Browser werden es analysieren? Wie wählt ein Browser aus mehreren Fonts aus, die er verwenden soll, wenn er die Mehrzahl davon unterstützt? In welcher Reihenfolge sieht der Browser Werte und src Eigenschaften?
• Ist es so, dass ein allein src Eigenschaft ohne local() und format() Werte und mit einem korrekten eot Format von IE8 werden akzeptiert und es wird nicht weiter auf die nächste src Eigenschaft gehen, in denen andere Formate definiert werden? Oder wird es immer noch zum nächsten gehen src property & herunterladen Schriftarten von dort?
• Wenn eine Abfragezeichenfolge (?) in der nächsten src Eigenschaft, wird IE8 (IE9 im Kompatibilitätsmodus auch berücksichtigt) laden Sie die Schriftart eot zweimal? Und wenn es keine Abfragezeichenfolge gibt, dann wird es die Schriftart eot von der ersten Eigenschaft akzeptieren und wird nicht brechen oder wird es brechen & gelten keine benutzerdefinierte definiert Schriftart sogar aus der ersten src Eigenschaft?

Unterstützt IE9 im normalen Modus auch eot Format? Wird nicht die kugelsicher Syntax noch arbeiten, wenn ich die ganze Abfrage-String Erklärung entfernen wie:

@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 */ 
} 

Wird nicht die oben noch die möglichen Fälle in allen arbeiten? IE6-8 wird die erste src zusammen mit dem IE9 im Kompatibilitätsmodus haben und alle anderen Browser werden den Rest der Regeln folgen.

Würde die obige Regel von mir vorgeschlagen, mit dem local() Wert gleiche Arbeit wie folgt: Modus

@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 */ 
} 

Ob in IE8 oder IE9 in Kompatibilität wird local() Wert sie weggehen .. Würde IE9 im normalen Modus Verwenden Sie eot oder woff von oben Regel? Wenn es eot nicht verwenden, können wir machen eine leichte Veränderung zum ersten src Eigenschaft wie folgt:

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

IE9 wird diese Eigenschaft ignorieren, wie es eot und ziehen weiter weiter enthält woff zu verwenden, habe ich recht? Auch, wenn ich wieder eine Änderung dieser Regel machen sich wie folgt aus:

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

Würde jetzt IE9 eot Format verwenden oder noch weitergehen mit woff?

Das ist alles was ich wissen will und ja ich denke diese Fragen brauchen definitiv eine Antwort.

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 */ 
} 

Das ist einfach ein Trick, um die verschiedenen IE * Inkonsistenzen zu umgehen, mit dem ersten src Sie IE9 erfüllen, so dass, wenn Ihre Zuschauer diesen Browser er diese Schrift bekommt hat, wird die zweite src nicht die erste überschreiben weil IE9 ist nicht in der Lage, die 'webfont.eot?#iefix' Zeichenfolge

zu analysieren. Über die zweite Quelle der Regel: das ist die "alte" kugelsichere Syntax und Sie sind bereits vertraut mit ihm. Bitte beachten Sie, dass Microsoft, wie im Blogpost von Fontspring über die verhärtete Regel gesagt, den Fehler in IE9 behoben hat, wenn Sie IE7 und IE8 Render-Modi verwenden, aber IE7 und IE8 nicht repariert haben, so dass Sie diesen Trick für diese Browser benötigen.

Eine Klarstellung über local(): dies sagen dem Browser, eine bestimmte lokale (dh auf dem PC des Betrachters der Seite) verfügbaren Schriftart zu verwenden, wenn Ihr Betrachter es nicht installiert hat, dann wird er nicht in der Lage sein Um die richtige Schriftart zu sehen, können Sie dies überprüfen: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley