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

195

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?

Kaushik Gopal
źródło
2
W tej chwili mam dokładnie ten problem z dyrektywami i czcionkami generowanymi przez FontSquirrel.
jason
do celów testowych możesz spróbować dodać deklaracje @ font-face do html między <style>tagami i sprawdzić, czy masz ten sam problem?
Chris_O,
dodanie jednego przecinka może również rozwiązać ten problem, na przykład: format url („Sans-serif”) („woff”)
Farzan Balkani

Odpowiedzi:

234

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

Manuel
źródło
Jeśli nie pracujesz lokalnie, prawdopodobnie nie rozwiąże to problemu, ale możesz mimo to użyć ścieżek opartych na katalogu głównym na aktywnej stronie, to znaczy „/ resources / font” zamiast względnych, takich jak „../ font ”, ale nie wiem o thumblr: jeśli możesz podać adres URL strony, mogę to sprawdzić.
Manuel
Deklaracja czcionek działa dobrze w przeglądarce Chrome, Safari, nawet w drodze do IE6 ... ale nie Firefox.
jason
3
Ach, mówisz o niesławnym problemie między domenami: możesz albo użyć swojej czcionki w kodowaniu base64, albo poprosić thumblr o dodanie dodatkowego nagłówka „Access-Control-Allow-Origin” podczas udostępniania czcionek.
Manuel
Jak więc absurdalnie surowe są zasady dotyczące wielu domen w Firefoksie? Podobnie jak CDN i witryna mają tę samą domenę, tylko różne subdomeny.
jason
1
@Jason, niechlujne 64-bitowe kodowanie też nie działa? To zadziałało dla mnie.
Kaushik Gopal,
42

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
alademann
źródło
Pracowałem też dla mnie. Dzięki zoulodi!
James
Pracuj dla mnie jak urok! Dziękuję
Moxet,
1
Zrobił też trik dla mnie. Musiałem także dodać woff2: czcionka AddType / woff2 .woff2
hdomos
17

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");
izraelski
źródło
3
Umieszczenie local('name')w font-facedeklaracji oznacza po prostu „próbować czcionki obciążenia«name»na komputerze użytkownika. Jeśli nie zostanie znaleziony, załadować webfont”. (patrz dokumenty MDN ). Mimo to cieszę się, że ci się udało! :)
henry
4
Działa „Dla Ciebie”, ponieważ czcionkę zainstalowano na komputerze. Inni użytkownicy tego nie zobaczą. Naprawiłeś to tylko dla siebie.
Hugo Delsing
4

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.

ruyadorno
źródło
4

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.

tarquinwinot
źródło
4

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");
}
Oktawian Vladu
źródło
3

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

Davus
źródło
3

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.

Pierre
źródło
2
komentarze do wybranego rozwiązania wspominają o rozwiązaniu kodującym base64.
Kaushik Gopal,
@KaushikGopal Myślę, że odpowiedź musiała zostać zredagowana po opublikowaniu tego.
Pierre
3

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.

niall.campbell
źródło
TO. MyFonts.com wyrzuca swoje pliki czcionek nazwane w ten sposób, co powoduje renderowanie Firefoksa 35 na różne dziwne sposoby. Zmiana nazwy czcionki rozwiązała problem.
coreyward
2

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.

Casey
źródło
Właściwie nie powinieneś do tego używać interfejsu API Google Font. Występuje problem z Firefoksem, który uniemożliwia korzystanie z wariantów czcionek (kursywa, pogrubienie itp.), Jeśli czcionka jest zainstalowana lokalnie. Jedynym sposobem, który udało mi się znaleźć, jest osłabienie lokalnej deklaracji src za pomocą buźki (oczywiście każda dziwna postać zrobiłaby to, jest po prostu ... szczęśliwa).
jason
Oto link do raportu o błędzie: code.google.com/p/googlefontdirectory/issues/detail?id=13
jason
2

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

Jason
źródło
Nie wiedziałem, że Paul opracowałem nową metodę punktora, będę musiał wypróbować tę metodę i sprawdzić, czy rozwiązuje ona moje problemy z czcionkami na FF.
Kaushik Gopal,
[Aktualizacja: Mimo że jest pomocna, nie rozwiązuje problemu]. Wskazano mi właściwe rozwiązanie.
Kaushik Gopal,
1

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.

David Baron
źródło
Hmm .. tak David, wydaje mi się, że uruchamiam go lokalnie, ale wcześniej miałem podkatalog z tym samym katalogiem. Więc mój type.css leży w folderze głównym, a w tym samym miejscu znajduje się folder czcionek. więc type.css i folder czcionek znajdują się w tym samym katalogu. Aby być bezpiecznym, próbowałem również usunąć go z katalogu i bezpośrednio umieścić czcionki. To wciąż nie działa na Firefoxie.
Kaushik Gopal
Teraz zaczynam czuć, że jest to jeden z dwóch: 1) coś złego w moim kodowaniu, jeśli ktoś zauważy cokolwiek z powyższego kodu, proszę bądź tak uprzejmy, aby to podkreślić. 2) FF nie traktuje ładnie @ font-face i importu wielu plików? Używam main.css, który zamierza importować @import type.css, który z kolei ma link do czcionek? Jakieś lekkie osoby? Btw dzięki za złapanie wagi czcionki @David!
Kaushik Gopal
Firefox dobrze radzi sobie z wieloma importami. Jakiej wersji używasz? Debuguj kod za pomocą FireBug; stosować proces eliminacji. Praca lokalna wprowadza problemy, które można wyeliminować zdalnie. W ten sposób debugujesz!
Casey
„Pliki w różnych katalogach są uznawane za różne domeny dla reguł międzydomenowych” - nie, nie są.
Mike Chamberlain
1

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ę.

bort
źródło
1

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.

WebFixItMan
źródło
1

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

Ganesh Garad
źródło
0

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!

ipalaus
źródło
1
Wątpię, czy byłoby to 404 w jednej przeglądarce, a nie w innych.
jason
@jason Jedna przeglądarka może używać innego rodzaju pliku niż inny. :)
ipalaus
Cóż, w przypadkach, w których napotkałem ten problem, mogę w 100% powiedzieć, że panel sieci Firebug pokazuje, że ładowanie czcionki zakończyło się powodzeniem.
jason
0

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";
}
rossisdead
źródło
0

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.

SKWebDev
źródło
0

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/

arri
źródło
0

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; }
CR41G14
źródło
0

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!

Aleksandar
źródło
0

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.

theva
źródło
0

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
Simplans
źródło
0

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.

amir mola
źródło
-2

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

rnaud
źródło
Dzięki rnaud, infact użyłem fontsquirrel do powyższego :). Właśnie sformatowano tabulatory i spacje do czytelnej formy.
Kaushik Gopal
Nigdy nie używałeś SVG w deklaracji czcionek, ale używasz Font Squirrel? Następnie użyłeś SVG w deklaracji czcionek.
jason
1
@jason: Możesz zrezygnować z używania SVG z Font Squirrel.
rossisdead
-2

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.

Nehbur
źródło
-2

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

mikołaj
źródło