CSS @ font-face funktioniert nicht in ie

Question

Ich habe das folgende CSS, das in Firefox funktioniert, aber nicht IE. Offensichtlich sind die Schriftarten innerhalb des Verzeichnisses. Irgendwelche Vorschläge?

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: Futura, Verdana, Arial, sans-serif; 
    font-size:1.2em; 
    height: 40px; 
} 

Answer 1

Sie könnten die Google Font API verwenden. Sie sagen, es funktioniert ab IE 6 und höher. (Ich habe nicht getestet.)

Googles Portion Infrastruktur Pflege der Umwandlung der Schrift in ein Format kompatibel mit jedem modernen Browser nimmt (einschließlich Internet Explorer 6 und up), ...

Answer 2

Von http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Nun, da die Web-Fonts unterstützt werden in Firefox 3.5 und 3.6, Internet Explorer , Saf ari, Opera 10.5 und Chrome, Webautoren stehen vor neuen Fragen : Wie unterscheiden sich diese Implementierungen? Welche CSS-Techniken werden alle unterbringen? Der Firefox-Entwickler John Daggett hat kürzlich eine kleine Zusammenfassung zu diesen Problemen gepostet und die Problemumgehungen, die sind, untersucht. Als Reaktion auf diesen Beitrag und als Antwort auf die Arbeit von Paul Irish, insbesondere auf , kam ich auf die folgende @ font-face CSS-Syntax. Es wurde in allen oben genannten Browser einschließlich IE 8, 7, und 6 getestet. So weit, so gut. Im Folgenden finden Sie eine Testseite, die die kostenlose Droid-Schrift als vollständige Schriftfamilie mit Regular, Italic, Bold, und Bold Italic deklariert. Quelle anzeigen für Details. Warnung: Beachten Sie, dass Readable Web seine erste @ font-face-bezogene Software Dienstprogramm zum Erstellen von nativ komprimierten EOT-Dateien schnell und einfach veröffentlicht hat. Es hat seine eigene Website und zusätzlich zu dem Dienstprogramm selbst enthält das Download-Paket hilfreiche Dokumentation, eine Testschrift und eine EOT-Testseite. Es heißt EOTFAST Wenn Sie mit @ font-face arbeiten, ist es ein Muss.

Hier ist der Mo‘Bulletproofer Code:

@font-face{ /* for IE */ 
    font-family:FishyFont; 
    src:url(fishy.eot); 
} 
@font-face { /* for non-IE */ 
    font-family:FishyFont; 
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype"); 
} 

Answer 3

ich viele Tutorials lesen, die Hacks vorgeschlagen, so kam ich mit dieser Lösung bis ich denke, besser ist ... Es scheint gut zu funktionieren.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
} 
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
} 
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
} 

Answer 4

Wenn Sie immer noch Probleme mit diesem haben, hier ist Ihre Lösung:

http://www.fontsquirrel.com/fontface/generator

Es funktioniert viel besser/schneller als jeder andere font-Generator und gibt auch ein Beispiel für Sie benutzen.

Answer 5

Schriftart Eichhörnchen funktionierte nicht für mich. Ich habe eine Schriftart zur Konvertierung in mehrere Schriftarten für die IE-Unterstützung hochgeladen. Es hat Onversion durchgeführt, die ich herunterladen konnte. Ich habe dann Inhalte nach Spezifikationen auf meinen Server hochgeladen. Ich konnte entweder nur Firefox oder IE zur Arbeit bringen, aber nicht beides. Die Lösung, die für mich funktionierte, war der obige Mo Bullet Proofer-Link.

Answer 6

Für IE> 9 Sie folgende Lösung verwenden können:

@font-face { 
    font-family: OpenSansRegular; 
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot'); 
} 

Answer 7

ich gefunden habe, wenn die Schriftart Erklärungen in einer Medienabfrage sind IE (beide Rand und 11) wird sie nicht geladen werden; sie müssen das erste, was erklärt im Stylesheet und nicht eingewickelt in einer Medienabfrage

Answer 8

ändern nach unten

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: "Futura"; 
    font-size:1.2em; 
    height: 40px; 
}