Wie löst #iefix das Laden von Web-Schriftarten in IE6-IE8?

70

Viele Artikel im Web wie diese: http://www.fontspring.com/blog/fixing-ie9-font-face-problems schlagen vor ?#iefix, der eot-URL ein hinzuzufügen. Ich war neugierig zu wissen, wie dies das Problem lösen wird. Vielen Dank.

css internet-explorer webfonts

— Weinstock
quelle

83

IE8 und ältere haben einen Fehler in ihren Parsern für das src-Attribut. Wenn Sie also mehr als ein Schriftformat in das SRC aufnehmen, kann der IE es nicht laden und meldet einen 404-Fehler.
Das Fragezeichen löst dieses Problem, da es den IE täuscht, der Rest der Zeichenfolge (andere src) sei eine Abfragezeichenfolge, und daher nur die EOT-Datei lädt ...
Andere Browser folgen der Spezifikation und laden nur den erforderlichen Schrifttyp. ..
Vielleicht möchten Sie die Bulletproof @ font-face-Syntax von Paul Irish lesen , um mehr über andere Gründe zu erfahren ...

— Rexy Hoang
quelle

3

Dies antwortet nicht auf das zusätzliche Hash-Tag (? #). Der Link der ursprünglichen Frage enthält eine Vermutung, die jedoch vage ist.

— Commonpike

Es ist überhaupt nicht vage: In einigen seltenen Fällen schlägt der IE fehl, weil die @ font-face-Deklaration zu viele Zeichen enthält. Dies kann in den meisten Fällen durch Hinzufügen eines Hash-Zeichens '#' nach dem '?' Fragezeichen. Dies verschafft Ihnen ein bisschen mehr Platz ... Es ist nur vage, warum es zusätzlichen Raum kauft.

— DrCord

Beachten Sie, dass die Schriftart .eot in IE8 manchmal auch mit diesem Fix nicht funktioniert (obwohl die Schriftart in IE9 + funktioniert). Versuchen Sie, einen anderen ttf to eot-Konverter zu verwenden, wenn Sie dieses Problem haben.

— Cakan

20

Sie können alles tun, anstatt ?#iefix: Das grundlegende Ziel besteht darin, eine ?#somethingnach der ersten Schriftartdatei in die URL einzufügen, da @Rexyz bereits geantwortet hat.

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#FooAnything') 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 */
}

— Basarat
quelle

Sind .otfSchriftarten auch für Safari, Android, iOS?

— e9t

4

Dies vollständig zu realisieren, ist eine alte Frage.

Aber für diejenigen, die hierher gekommen sind, um zu suchen, welche Version von "diesem" Browser diesen Hack benötigt, ist es jetzt sicher zu entfernen, wenn Sie IE <10 nicht unterstützen.

Also einfach loswerden und nur eine Zeile haben, in der alle Schriftarten in allen von Ihnen angebotenen Formaten aufgelistet sind.

3

Das ?#iefixdient dazu, den Browser daran zu hindern, Zeichen nach dem ?als Abfragezeichenfolge zu interpretieren, und verhindert somit einen weiteren möglichen Serverfehler.

— atwright147
quelle

Meinen Sie damit, dass der Server keine Zeichen mehr interpretiert? als Abfragezeichenfolge.

— Mark Fisher

Es verhindert, dass eine Abfragezeichenfolge an das Ende der URL angehängt wird (da auf das Fragezeichen unmittelbar eine Hash-Zeichenfolge folgt). Alle zusätzlichen Fragezeichen, die nach dem Hash am Ende der URL hinzugefügt werden, werden nur als Teil des Hash behandelt. @ Rexy Hoangs Antwort ist eine nützlichere Antwort :)

— atwright147