Twarz czcionki CSS "? #iefix"

Question

Mam pytanie dotyczące css @ font-face. Używam następującego kodu z tej strony internetowej (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).

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

Dlaczego linia "url('myfont-webfont.eot?#iefix')" mieć "#iefix" na końcu?

Answer 1

Dzieje się tak ze względu na sposób interpretowania deklaracji czcionek przez IE8 i poniżej. Normalny url('myfont-webfont.eot') doprowadziłby do 404 błędów serwera w tych wersjach IE; dodanie ?#iefix rozwiązuje problemy z serwerem. (To z tego samego powodu nie ma stylów warunkowych dla IE.)

Według Fontspring (prosto od źródła):

Internet Explorer < 9 ma błąd w składni atrybutu src. Jeśli umieścisz więcej niż jeden format czcionki w src, IE nie załaduje go i zgłosi błąd 404. Powodem jest to, że IE próbuje załadować jako plik wszystko pomiędzy nawiasem otwierającym aż do ostatniego nawiasu zamykającego. Aby poradzić sobie z tym niewłaściwym zachowaniem, po prostu deklarujesz EOT jako pierwszy i dołączasz pojedynczy znak zapytania. Znak zapytania oszukuje IE, myśląc, że reszta łańcucha jest ciągiem zapytania i ładuje tylko plik EOT. Inne przeglądarki postępują zgodnie ze specyfikacją i wybierają wymagany format w oparciu o kaskadę src i wskazówkę dotyczącą formatu.

Część niezbędna to ?; Wyobrażam sobie, że #iefix jest po prostu semantyczną linią dla programistów, która nie jest interpretowana przez przeglądarkę w żaden szczególny sposób.

Oto kilka dodatkowych informacji, jeśli chcesz: https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face.