404 Fehler beim IE lädt Schriftarten

Question

ich meine Schriften wie diese bin Aufruf:

@font-face { 
    font-family: 'dinar'; 
    src: url('../fonts/dinarm.eot?#'), 
     local('?'), 
     local('Mj_Dinar Two Medium'), 
     url('../fonts/dinarm.woff') format('woff'), 
     url('../fonts/dinarm.ttf') format('truetype'), 
     url('../fonts/dinarm.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal 
} 
@font-face { 
    font-family: 'font-bmi'; 
    src: url('../fonts/font-bmi/font-bmi.eot'); 
    src: url('../fonts/font-bmi/font-bmi.eot') format('eot'), 
     url('../fonts/font-bmi/font-bmi.woff') format('woff'), 
     url('../fonts/font-bmi/font-bmi.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal 
} 

Jedes Mal, einige Benutzer mit dem Internet Explorer auf die Site zuzugreifen versucht, ich viele 404-Fehler in Web-Host Nutzungsprotokoll sehen und Schließlich wird der Benutzer von meinem Sicherheits-Plugin gesperrt. Es ist ein Beispiel für Nutzungsprotokoll:

80.00.000.146 - - [05/Apr/2017:00:46:10 +0430] 
"GET /wp-content/themes/fonts/font-bmi/font-bmi.eot)%20format(%22eot%22), 
%20url(../fonts/font-bmi/font-bmi.woff)%20format(%22woff%22), 
%20url(../fonts/font-bmi/font-bmi.ttf)%20format(%22truetype%22 HTTP/1.1" 404 4058 
"http://www.21tech.ir/some-page/" "Mozilla/4.0 
(compatible; MSIE 8.0; Windows NT 5.1; --some other information--)" 

Ich weiß, es Mozilla/4.0 schrieb, aber es ist IE tatsächlich ich habe es ausprobiert.

Was ist das Problem und wie kann es gelöst oder vermieden werden?

Answer 1

Der Grund dafür ist, dass ältere Versionen von IE die zweite src Eigenschaft in Ihrer zweiten @font-face Erklärung nicht richtig interpretieren können. (?) Die Lösung, die so genannten Fontspring @font-face syntax ist ein einziges Fragezeichen bis zum Ende der .eot URL in dieser Eigenschaft anhang, tricksen IE in alles zu denken, die folgt, ist eine Abfragezeichenfolgeflag:

@font-face { 
    font-family:"font-bmi"; 
    src:url("../fonts/font-bmi/font-bmi.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/font-bmi/font-bmi.woff2") format("woff2"), 
     url("../fonts/font-bmi/font-bmi.woff") format("woff"), 
     url("../fonts/font-bmi/font-bmi.ttf") format("truetype"); 
    font-weight:normal; 
    font-style:normal 
} 

Sie versucht hat, ein paar verschiedene "Hacks", um das Problem in Ihrer ersten @font-face Deklaration zu lösen, aber obwohl Sie es erfolgreich geschafft haben, IE davon abzuhalten 404s zu melden, ist die obige Lösung viel sauberer und hat keinen Einfluss auf die Lesbarkeit Ihres CSS.

Weiterführende Literatur finden Sie Paul Irish des „Bulletproof @font-face syntax“ Artikel aus dem Jahr 2009.