2013-01-24 9 views
5

Używam FontAwesome (http://fortawesome.github.com/Font-Awesome/) jako czcionki internetowej na mojej stronie:błąd CSS3111 podczas osadzania czcionek FontAwesome w IE8

http://www.jungledragon.org/apps/jd3/

mój problem jest to, że czcionka nie ładuje się w IE8 (tryb standardów), zamiast tego wyświetlane są kwadratowe bloki. Ponieważ te ikony są niezbędne do zaprojektowania, jestem gotów to naprawić.

Mam już zbadane wiele pytań i odpowiedzi, więc pozwól mi powiedzieć, co zrobiłem, aby rozwiązać ten problem. Po pierwsze, używam zalecany format osadzanie czcionki:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../type/fontawesome-webfont.eot'); 
    src: url('../type/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../type/fontawesome-webfont.woff') format('woff'), 
    url('../type/fontawesome-webfont.ttf') format('truetype'), 
    url('../type/fontawesome-webfont.svg#FontAwesome') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

To jest de facto standardem dla czcionek załadunku X-przeglądarki, a samo wyjście, które generowane przez narzędzia jak FontSquirrel. Katalog typów jest związany z moim katalogiem CSS, a ta czcionka zostanie załadowana we wszystkich przeglądarkach oprócz IE8.

Po drugie, mam włączone początki krzyżowej domeny (CORS), więc to zdecydowanie nie jest problem.

Niektórzy ludzie sugerują, że ładowanie sht html5 może kolidować z ładowaniem fontu IE8, ale całkowite usunięcie shiv nadal nie robi różnicy.

Witryna działa na Apache2, dodanie typów MIME nie ma żadnego wpływu na wynik. Ponadto mogę potwierdzić, że mogę pobrać plik eot z IE8 przy użyciu bezpośredniej ścieżki, więc plik jest zdecydowanie dostępny.

Nie mam pojęcia, co robię źle, ale to musi być coś na moim końcu. Powód jest prosty: otwarcie oficjalnej strony FontAwesome z IE8 ładuje czcionkę dobrze. Ponadto czcionka drugorzędna, której używam (używana w logo witryny) również jest w porządku. Ta druga czcionka pochodzi z witryn internetowych Google, a czcionka fontawesome jest hostowana w tej samej domenie co witryna.

Brakuje mi pomysłów, jak rozwiązać ten problem, jakieś wskazówki?

Aktualizacja: Dodam, że w pasku narzędzi IE programistów, jest to błąd otrzymuję:

CSS3111: @ font-face napotkał nieznany błąd. fontawesome-webfont.eot

znalazłem ten artykuł omawiający błąd:

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

... jeszcze nie widzę rozwiązania wewnątrz, który pomaga mi.

Odpowiedz

7

Ostatecznie ta odpowiedź rozwiązać mój problem:

https://stackoverflow.com/a/12459447/80969

musiałem zmodyfikować plik ttf dołączoną do opakowania fontawesome pobrać za pomocą programu do edycji niejasne czcionki. Tam zmieniłem nazwę "Human font name" na taką samą, jak wszystkie inne pola "name". Następnie użyłem http://www.font2web.com/ do wygenerowania nowego pliku .eot i zintegrowałem go z projektem, zachowując wszystko inne. I presto, działa!

Wygląda na to, że moja wersja font-awesome sprawiła, że ​​problem został wbudowany w pobieranie.

+1

"Niepoprawny program do edycji czcionek" to prawdopodobnie http://sourceforge.net/projects/fontforge/files/latest/download To i tak jest dobre, a to rozwiązanie też zadziałało. –

+0

Moja czcionka (FontAweomse) nie była pracując w ogóle w IE8 i IE9 to działało, ale powodując powyższy błąd. To (ponowne utworzenie pliku .eot) rozwiązało oba problemy. Dzięki za link! – Chris

+0

Wpadłem również na ten sam problem, skompilowałem poprawiony plik EOT i udostępniłem go tutaj: https://gist.github.com/vjt/7436066. Mam nadzieję, że to uratuje komuś bardzo zły okres, w którym spędziłem walkę z FontForge w systemie Windows. – vjt