CSS @ font-face nie działa z Firefoksem, ale działa z Chrome i IE

Poniższy kod działa w Google Chrome w wersji beta, a także w IE 7. Jednak Firefox wydaje się mieć z tym problem. Podejrzewam, że jest to problem ze sposobem, w jaki dołączane są moje pliki CSS, ponieważ wiem, że Firefox nie jest zbyt przyjazny w zakresie importowania między domenami.

Ale to wszystko tylko statyczny HTML i nie ma mowy o wielu domenach.

Na mojej stronie docelowej.html wykonuję import CSS w następujący sposób:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

W main.css mam inny taki import:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

i w ramach type.css mam następujące deklaracje:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

Mam katalog o nazwie „font” w tej samej lokalizacji, co type.css. Ten katalog czcionek zawiera wszystkie pliki woff / ttf / svg itp.

Jestem zaskoczony tym. Działa w Chrome i IE, ale nie w Firefox . Jak to jest możliwe? czego mi brakuje?

LOKALNIE URUCHAMIANIE STRONY ( file:///)

Firefox jest file:///domyślnie wyposażony w bardzo surową zasadę „pochodzenie pliku uri” ( ): aby zachowywał się tak, jak inne przeglądarki, przejdź do about:config, filtruj fileurii przełącz następujące preferencje:

security.fileuri.strict_origin_policy

Ustaw na wartość false i powinieneś być w stanie załadować lokalne zasoby czcionek na różnych poziomach ścieżki.

PUBLIKOWANA STRONA

Zgodnie z moim komentarzem poniżej i po wdrożeniu witryny występuje ten problem, możesz spróbować dodać dodatkowy nagłówek, aby sprawdzić, czy problem konfiguruje się jako problem między domenami: nie powinien, ponieważ określasz ścieżki względne, ale i tak spróbuję: w pliku .htaccess określ, czy chcesz wysłać dodatkowy nagłówek dla każdego żądanego pliku .ttf / .otf / .eot:

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

Szczerze mówiąc, nie spodziewałbym się, że zrobi to jakąkolwiek różnicę, ale jest to tak proste, że warto spróbować: w przeciwnym razie spróbuj użyć kodowania base64 dla kroju czcionki, brzydkie, ale może też działać.

Ładne podsumowanie jest dostępne tutaj

Oprócz dodania następujących elementów do .htaccess: (dzięki @Manuel)

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

Możesz spróbować jawnie dodać typy MIME webfont do pliku .htaccess ... w ten sposób:

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

Na koniec mój plik .htaccess wygląda tak (dla sekcji, która umożliwia działanie stron internetowych we wszystkich przeglądarkach)

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

Też miałem ten problem. Znalazłem odpowiedź tutaj: http://www.dynamicdrive.com/forums/showthread.php?t=63628

To jest przykład rozwiązania, które działa na Firefoxie, musisz dodać ten wiersz do swojej czcionki css:

src: local(font name), url("font_name.ttf");

Zostawię to tutaj, ponieważ mój współpracownik znalazł rozwiązanie dla związanego z tym problemu „czcionka nie działa na Firefox, ale wszędzie indziej”.

Problem polegał na tym, że Firefox zepsuł się deklaracją rodziny czcionek, co ostatecznie go naprawiło:

body{ font-family:"MyFont" !important; }

PS: Używałem również html5boilerplate.

Miałem ten sam problem. Sprawdź dwukrotnie swój kod pod kątem H1, H2 lub innego stylu, na który celujesz, stosując regułę @ font-face. Zauważyłem, że brakuje mi śpiączki po font-family: 'custom-font-family' Arial, Helvetica etctym, jak pokazywała się dobrze w każdej przeglądarce oprócz Firefoksa. Dodałem śpiączkę i zadziałało.

Miałem dokładnie ten sam problem. Musiałem utworzyć nowy folder o nazwie „fonts” i umieścić go w wp_content. Mogę uzyskać do niego dostęp z mojej przeglądarki, takiej jak http://www.example.com/wp-content/fonts/CANDY.otf

Poprzednio folder czcionek znajdował się w tym samym katalogu, co mój plik CSS, a @ font-face wyglądał tak:

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

Jak wspomniałem powyżej, nie działało to w Firefoksie, ale tylko w Chrome. Teraz działa, ponieważ użyłem ścieżki bezwzględnej:

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Miałem dokładnie ten problem z uruchomieniem FF4 na Macu. Miałem uruchomiony lokalny serwer programistyczny i moja deklaracja @ font-face działała dobrze. Przeprowadziłem migrację do wersji na żywo, a FF „flashował” prawidłowy typ przy ładowaniu pierwszej strony, ale podczas głębszej nawigacji krój czcionki był domyślnie ustawiony w arkuszu stylów przeglądarki.

Znalazłem rozwiązanie polegające na dodaniu następującej deklaracji do .htaccess

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

znalezione przez

Jednym łatwym rozwiązaniem, o którym nikt jeszcze nie wspomniał, jest osadzenie czcionki bezpośrednio w pliku css przy użyciu kodowania base64.

Jeśli korzystasz z fontsquirrel.com, w Font-face Kit Generator wybierz tryb eksperta , przewiń w dół i wybierz Base64 Encode w CSS Options - pobrany Font-Kit będzie gotowy do podłączenia i odtwarzania.

Ma to także dodatkową korzyść polegającą na skróceniu czasu ładowania strony, ponieważ wymaga o jedno żądanie mniej HTTP.

Wspomnę, że niektóre czcionki mają problemy z firefox, jeśli ich nazwa pliku zawiera określone znaki. Niedawno napotkałem problem z czcionką „Modulus” o nazwie „237D7B_0_0”. Usunięcie podkreślenia w nazwie pliku i zaktualizowanie css w celu dopasowania do nowej nazwy pliku rozwiązało ten problem. Inne czcionki o podobnych znakach nie mają tego problemu, który jest bardzo ciekawy ... prawdopodobnie błąd w Firefoksie. Polecam trzymanie nazw plików tylko dla znaków alfanumerycznych.

W szczególności w przypadku tej czcionki należy używać interfejsu API czcionek Google:

http://code.google.com/webfonts/family?family=Droid+Sans

Jeśli nadal chcesz korzystać z generatora zestawu FontSquirrel, użyj opcji hakowania buźki, aby wyeliminować problemy z czcionkami lokalnymi. Po wygenerowaniu zestawu sprawdź, czy wygenerowany plik demo.html działa w programie FireFox. Założę się, że tak. Teraz prześlij go na swój serwer - założę się, że tam też działa, ponieważ FontSquirrel jest niesamowity.

Jeśli jednak złamałeś wygenerowany kod zestawu podczas integracji z projektem, skorzystaj ze standardowych metod debugowania - sprawdź 404 i przechodź wiersz po wierszu, aż znajdziesz problem. WOFF zdecydowanie powinien działać w FF, więc to dobre miejsce na start.

Na koniec, jeśli to nie zadziała, zaktualizuj FireFox. Napisałem to wszystko, zakładając, że używasz najnowszych; ale nie określiłeś wersji, którą się zameldujesz, więc to może być twój problem.

Spróbuj sfałszować deklarację lokalnego źródła w swoich @font-facedyrektywach.

Znany jest błąd w przeglądarce Firefox lub interfejsie API czcionek Google, który uniemożliwia użycie wariantów czcionek, jeśli czcionka jest zainstalowana lokalnie, i odpowiada zdefiniowanej nazwie lokalnej:

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

Aby skutecznie sfałszować deklarację lokalną, po prostu spraw, aby lokalny ciąg źródłowy był nonsensem. Ogólnie przyjętą konwencją jest użycie uśmiechniętego znaku Unicode ( "☺"). Czemu? Paul Irish ma świetne wyjaśnienie na swoim blogu:

http://paulirish.com/2010/font-face-gotchas/#smiley

Czy testujesz to w plikach lokalnych lub poza serwerem WWW? Pliki w różnych katalogach są uważane za różne domeny dla reguł między domenami, więc jeśli testujesz lokalnie, możesz napotykać ograniczenia między domenami.

W przeciwnym razie prawdopodobnie warto wskazać adres URL, w którym występuje problem.

Sugeruję również zajrzenie do konsoli błędów Firefoksa, aby sprawdzić, czy zgłaszane są błędy składniowe CSS lub inne błędy.

Zwrócę też uwagę, że prawdopodobnie potrzebujesz grubości czcionki: pogrubienie w drugiej regule @ font-face.

Korzystanie z reguły .htaccess kontroli dostępu Zezwalaj na pochodzenie nie działało dla mnie, gdy napotkałem ten problem.

Zamiast tego w IIS w pliku web.config wstaw blok system.webServer pokazany poniżej.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

To działało dla mnie jak urok. Jeśli musisz ograniczyć dostęp do konkretnej domeny, zamień * na domenę.

Miałem ten sam problem z prawidłowym wyświetlaniem czcionki w przeglądarce Firefox. Oto, co dla mnie działa. Dodaj ukośnik przed katalogiem zawierającym czcionkę w atrybucie url. Oto moje wersje przed i po:

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

zauważyć wiodący ukośnik przed „czcionkami” w adresie URL? Informuje to przeglądarkę, aby uruchomiła się w katalogu głównym, a następnie uzyskała dostęp do zasobu. Przynajmniej dla mnie - problem rozwiązany.

Jeśli próbujesz zaimportować czcionki zewnętrzne, napotykasz jeden z najczęstszych problemów z przeglądarką Firefox i inną przeglądarką. Kiedyś twoja czcionka działa dobrze w Google Chrome lub w innej przeglądarce, ale nie w każdej przeglądarce.

Istnieje wiele przyczyn tego rodzaju błędów. Jednym z głównych powodów tego problemu jest poprzednia zdefiniowana czcionka. Musisz dodać ważne słowo kluczowe po końcu każdego wiersza kodu CSS, jak poniżej:

Przykład:

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

Opis: wprowadź powyższy kod w pliku CSS lub kod tutaj. W powyższym przykładzie zamień „Hacen Arabia Saudyjska” na rodzinę czcionek i zastąp adres URL zgodnie z katalogiem czcionek.

Jeśli wpiszesz! Ważne w kodzie css, przeglądarka automatycznie skupi się na tej sekcji i zastąpi poprzednio używaną właściwość. Więcej informacji na stronie: https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html

Czy możesz sprawdzić za pomocą firebuga, czy dostajesz jakieś 404? Miałem problemy z przebiegiem i stwierdziłem, że rozszerzenie było takie samo, ale linux file.ttf różni się od file.TTF ... i działało ze wszystkimi przeglądarkami oprócz firefox.

Szkoda, że ​​to nie pomaga!

Jest to problem z konfiguracją ścieżek czcionki. Ponieważ nie rozpoczynasz ścieżki od „/”, Firefox spróbuje znaleźć czcionkę na podstawie ścieżki, w której znajduje się arkusz stylów. Zasadniczo Firefox szuka twojej czcionki w katalogu „root / css / font” zamiast katalog „root / font”. Możesz to łatwo naprawić, przenosząc folder czcionek do folderu css lub dodając / na początku ścieżek czcionek.

Wypróbuj to:

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

Spróbuj tego....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

Miałem podobny problem. Strona demonstracyjna fontsquirel działała w FF, ale nie moja, mimo że wszystkie pliki pochodziły z tej samej domeny!

Okazało się, że łączę mój arkusz stylów z bezwzględnym adresem URL (http://example.com/style.css), więc FF pomyślał, że pochodzi z innej domeny. Zmiana mojego odnośnika do arkusza stylów link do /style.css zamiast tego naprawiła dla mnie.

Być może twoim problemem jest problem z nazewnictwem, szczególnie w odniesieniu do użycia (lub nie) spacji i łączników.

Miałem problem z similair, który, jak mi się wydawało, rozwiązałem, umieszczając opcjonalne cudzysłowy (') wokół nazw czcionek / rodzin, ale w rzeczywistości domyślnie naprawiono problem z nazewnictwem.

Nie jestem do końca na bieżąco ze specyfikacją CSS, a przynajmniej jestem pewien, że pewne różnice w interpretacji specyfikacji przez różnych klientów są niejasne. Ponadto wydaje się, że jest również związany z konwencjami nazewnictwa PostScript, ale popraw mnie, jeśli się mylę!

W każdym razie, jak rozumiem teraz, twoja deklaracja używa mieszanki dwóch możliwych różnych smaków.

@font-face {
  font-family: "DroidSerif Regular";

Gdyby wziąć pod uwagę Droid rzeczywistej rodziny-name, którego Sans i Serif są członkami, tak jak na przykład ich dzieci Sans Regular lub Serif Bold , a następnie użyć albo everyhere obowiązuje do concatinate identyfikatorów, albo usuń spacje i używać camelCasing dla nazwa rodziny i łączniki dla identyfikatorów podrzędnych.

W odniesieniu do Twojej deklaracji wyglądałoby to mniej więcej tak:

@font-face {
  font-family: "Droid Serif Regular";

LUB

@font-face {
  font-family: DroidSerif-Regular;

Myślę, że oba powinny być całkowicie legalne, zarówno z cytatami, jak i bez nich, ale miałem różne sukcesy wśród różnych klientów. Może któregoś dnia mam trochę czasu, aby dowiedzieć się szczegółów na temat tego / tych isseu / s.

Uznałem ten artykuł za pomocny w zrozumieniu niektórych aspektów: http://mathiasbynens.be/notes/unquoted-font-family

W tym artykule zawarto więcej szczegółowych informacji na temat PostScript, a także kilka linków do pliku PDF specyfikacji Adobe: http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

Nie musisz się bawić z ustawieniami, po prostu usuń cudzysłowy i spacje z rodziny czcionek:

to

body {font-family: "DroidSerif Regular", serif; }

staje się tym

body {font-family: DroidSerifRegular, serif; }

W moim przypadku spowolniłem problem z wstawieniem kodu stylu czcionki

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

direclty w nagłówku strony index.html lub php, w tagu stylu. Pracuje dla mnie!

Z tego powodu jest to jeden z najlepszych wyników Google dla tego problemu. Chciałbym dodać, co rozwiązało ten problem dla mnie:

Musiałem usunąć format (opentype) z src font-face, a potem zadziałał również w Firefoksie. Wcześniej działało dobrze w Chrome i Safari.

Może to nie z powodu twojego kodu, tylko z powodu twojej konfiguracji Firefox.

Wypróbuj to od Tool bar Western do Unicode

View > Text Encoding > Unicode

Miałem ten sam problem i rozwiązałem go, dodając meta do treści:

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

Dzieje się tak w Firefoksie i Edge, jeśli w tekście HTML są zapisane znaki Unicode.

Nie wiem, jak stworzyłeś składnię, ponieważ nigdy nie użyłem SVG w deklaracji czcionek, ale Font Squirel ma naprawdę dobre narzędzie do tworzenia kuloodpornej składni czcionek z tylko jednej czcionki.

http://www.fontsquirrel.com/fontface/generator

Może to być także użycie adresu URL na ścieżce znacznika font-face. Jeśli używasz „http://domain.com”, to nie działa w Firefoksie, dla mnie zmiana na „http://www.domain.com” zadziałała.

Mój problem polegał na tym, że Windows nazwał czcionkę „font.TTF”, a firefox oczekiwał „font.ttf”. Zobaczyłem, że po otwarciu mojego projektu w systemie Linux zmieniłem nazwę czcionki na nazwę propera i wszystko działa