Niesamowita czcionka w przeglądarce Firefox i IE

Question

Mam problem z czcionką świetną, która jest dołączana do witryny z wordpress. W przeglądarkach Firefox i IE ikony nie będą wyświetlane w ogóle, jednak w przeglądarce Chrome przeglądarka działa poprawnie.

Znalazłem "rozwiązania", które mówią, że potrzebuję pliku .htaccess z pewną zawartością, aby zapewnić obsługę dla tych przeglądarek, jednak jeśli zastosuję to podejście, Safari i Chrome nagle mają problemy, a Firefox i IE nadal nie działają. pracujący.

Czy ktoś ma jakieś dodatkowe pomysły?

Oto komunikat błędu zgasić przez dzienniku błędów dev firefox podczas ładowania mojej strony:

Fehler: pobrania czcionki: pobieranie nie powiodło się (font-family: "icomoon" style: normal weight: normal rozciągania normal wskaźnik sRC 2) źle URI lub przechodzenie przez niedozwolonych źródło: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff Quelldatei: http://mysite.de/wp-content/themes/heat/style.css Zeile 0 Quelltext: @ czcionki twarzy {czcionki-seria: "icomoon"; styl czcionki: normalny; font-weight: normal; src: url ("fonts/icomoon/icomoon.eot? #iefix") format ("embedded-opentype"), url ("fonts/icomoon/icomoon.svg # icomoon") format ("svg"), adres url (" format czcionki ("woff"), url ("fonts/icomoon/icomoon.ttf") ("truetype"); }

Dzięki za pomoc!

P.S. Ikony na stronie internetowej fontów działają dobrze w FF przy okazji.

• UPDATE *

ok po przeczytaniu wielu postów na ten temat doszedłem do następującego wniosku: większość ludzi mają ten problem, bo ładują swoje czcionki z serwera zewnętrznego . dodając kod .htaccess, aby umożliwić FF właśnie to, rozwiązują swój problem. teraz, od kiedy ładuję moje czcionki z mojego własnego serwera, podejście .htaccess mi nie pomogło. co jednak pozbyło się powyższego komunikatu o błędzie, zmieniało ścieżkę do czcionki w css od względnego do bezwzględnej ścieżki. teraz zabawne jest - komunikat o błędzie nie pojawia się już podczas ładowania strony, ale ikony też nie! wciąż bez zmian, ale bez komunikatu o błędzie. Jestem zmieszany!

• UPDATE 2 *

znalazłem Fix -

Po zmianie wszystkie ścieżki w css od względem absolutnym (tzn www.mysite.de/fonts/... zamiast po prostu/fonts/...) i dodając plik .htaccess zawierający następujące wiersze:

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

do katalogu/fonts, wszystko działa dobrze w Firefox, Chrome i Safari. Nie miałem jeszcze okazji sprawdzić IE, ale wydaje się, że to był problem.

Mam nadzieję, że ktoś, kto napotka na te same problemy, otrzyma pomoc z tego.

Answer 1

Jeśli jesteś podobny do mnie, modyfikowanie pliku web.config jest czymś, czego nie możesz dotknąć.

Spróbuj zapisać wszystkie pliki czcionek (.eot, .ttf, itp.) We własnym folderze lokalnym i połączyć je lokalnie zamiast FontAwesome CDN. Oczyszczono go za każdym razem w IE i FF.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); } 

Answer 2

Wiem, że to stary post, ale pomogło mi znaleźć pewne problemy.

Mam standardową konfigurację apache i mod_headers włączone.

Mam /font/ folder w DOCUMENT_ROOT, dodając .htaccess w takim folderze (<DOCUMENT_ROOT>/font/.htaccess) o treści zaproponowanej przez Markus pracował na wszystkich przeglądarkach:

<FilesMatch ".(ttf|otf|eot|woff)$"> 
    <IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

Answer 3

trzeba dodać lokalną zasadę jeśli ciebie chcesz, aby Firefox używał czcionki po zainstalowaniu na komputerze. Zobacz https://developer.mozilla.org/Web/CSS/@font-face.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); } 

Answer 4

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"> 

Dodaj tę linię do pliku header.php tematu, którego używasz. Ta poprawka działała dla mnie.