2011-06-30 36 views
16

Mam problem z webfontami tylko w Firefoksie, wszystkie inne przeglądarki (w tym IE) działają doskonale.Firefox webfont nie ładuje się

Moim problemem jest to, że webfonts nie ładuje się wcale.

Sprawdziłem to możliwe rozwiązanie, edytując plik htaccess (http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems), ale nie miałem szczęścia.

Jedyną rzeczą, którą mogę powiedzieć, to w konsoli błędów Firefoksa otrzymuję następujące ostrzeżenie:

Error in parsing value for "src". Skipped to the next declaration.

Oto próbka mojego kodu font-face:

@font-face { 
    font-family:AngelinaRegular; 
    src:url(../fonts/angelina-webfont.eot); 
    src:url(../fonts/angelina-webfont.eot?iefix) format(eot), url(../fonts/angelina-webfont.woff) format(woff), url(../fonts/angelina-webfont.ttf) format(truetype), url(../fonts/angelina-webfont.svg#webfontOvuhCGpN) format(svg); 
    font-weight:normal; 
    font-style:normal; 
} 

Jakieś pomysły?

Odpowiedz

28

Z mojego doświadczenia wynika, Firefox jest wybredna spodziewa cytaty w @font-face zasad:

@font-face { 
    font-family: AngelinaRegular; 
    src: url('../fonts/angelina-webfont.eot'); 
    src: url('../fonts/angelina-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/angelina-webfont.woff') format('woff'), 
     url('../fonts/angelina-webfont.ttf') format('truetype'), 
     url('../fonts/angelina-webfont.svg#webfontOvuhCGpN') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
+1

To jest dokładnie to, co jest, dziękuję za pomoc. – user127181

+2

** Nie zapomnij dodać cytaty również w formacie '() '! ** :) – m93a

0

Występuję w tym samym problemie w ostatnich dniach. znalazłem wiele wskazówek i rozwiązań, ale żadna z nich nie sprawdziła się u mnie. następnie użyłem konsolę buildin Webdeveloper (shift STRG + k) zamiast Firebug i voila, widzę błąd:

[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms] 

tak, błąd 401, ponieważ strona znajduje się za .htaccess logowania ! po wyłączeniu autoryzacji htaccess wszystko działa poprawnie!

to oczywiście tylko obejście i brak rozwiązania, ale zanim się rozejdziemy, jak to zrobiłem, uważaj, czy twoja strona jest za loginem htaccess. że można zaoszczędzić dużo czasu;)

Innym problemem może napotkasz: http & https jeśli używać obu protokołów na swoim miejscu, należy osadzić czcionki tak:

src: url('//www.example.com/fonts/webfont.eot'); 

zamiast tego:

src: url('http://www.example.com/fonts/webfont.eot'); 

nadzieję, że komuś pomóż. Straciłem dużo czasu z powodu tego & $ §% & # *

1

Ha, usiadłem wieków próbują dowiedzieć się tego - dla mnie dylemat był w nazywaniu każdy src osobno - czyli zamiast tego (fontsquirrel wygenerowany kod):

@font-face { 
    font-family: 'comic_bookregular'; 
    src: url('comic_book-webfont.eot'); 
    src: url('comic_book-webfont.eot?#iefix') format('embedded-opentype'), 
     url('comic_book-webfont.svg#comic_bookregular') format('svg'); 
     url('comic_book-webfont.woff') format('woff'), 
     url('comic_book-webfont.ttf') format('truetype'), 

font-weight: normal; 
font-style: normal; 

} 

zrobiłem to:

@font-face { 
    font-family: 'comic_bookregular'; 
    src: url('../fonts/comic_book-webfont.eot'); 
    src: url('../fonts/comic_book-webfont.eot?#iefix') format('embedded-opentype'); 
    src: url('../fonts/comic_book-webfont.svg#comic_bookregular') format('svg'); 
    src: url('../fonts/comic_book-webfont.woff') format('woff'); 
    src: url('../fonts/comic_book-webfont.ttf') format('truetype'); 

    font-weight: normal; 
    font-style: normal; 

    } 

Jeśli spojrzeć kod fontsquirrel faktycznie ma ';' gdzie powinno być "," ale samo ustalenie nie pomogło. Z jakiegoś powodu zamknięcie wszystkich src za pomocą średników wykonało zadanie, gdy nic innego nie miało miejsca.

+0

nie działa dla mnie :-( –

0

Po szorowania stackoverflow próbuje każdą sugestię, a nie o ich pracy dowiedziałem się, co się stało z moim kodu, które po zamontowaniu, wykonane działać. Zostawiłem przecinki między deklaracjami czcionek.

miałem

font-family: "GiveMeTime" sans-serif; 

zamiast

font-family: "GiveMeTime", sans-serif; 

i jak to działało w każdej innej przeglądarce nie zauważyłem błędu. Ktoś inny z tym problemem, sprawdź, czy to nie jest zwykły błąd stosu czcionek!

1

jakiś problem ja również doświadczyłem wiele razy jest o: ustawienie config gfx.downloadable_fonts.enabled że gdy ustawiona na false klienta przyzwyczajenie pobierze wszystkie czcionki, dzięki czemu webmailers z ikonami webfont bardzo złe, jak widziałem z yahoo i biura 365 webmails ...

0

Po prostu miałem ten sam problem. Problemem była niewielka różnica w nazwach czcionek. Jest to zupełnie inna typografia w atrybucie font-rodzinnym w @ font-face i jeden użyłem w klasie za pomocą tej czcionki. Wygląda na to, że przeglądarki internetowe komputerów są bardziej tolerancyjne niż te na tabletach.