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?
<style>
tagami i sprawdzić, czy masz ten sam problem?Odpowiedzi:
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ź doabout:config
, filtrujfileuri
i 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:
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
źródło
Oprócz dodania następujących elementów do .htaccess: (dzięki @Manuel)
Możesz spróbować jawnie dodać typy MIME webfont do pliku .htaccess ... w ten sposób:
Na koniec mój plik .htaccess wygląda tak (dla sekcji, która umożliwia działanie stron internetowych we wszystkich przeglądarkach)
źródło
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:
źródło
local('name')
wfont-face
deklaracji 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! :)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:
PS: Używałem również html5boilerplate.
źródło
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 etc
tym, jak pokazywała się dobrze w każdej przeglądarce oprócz Firefoksa. Dodałem śpiączkę i zadziałało.źródł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:
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:
źródło
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
znalezione przez
źródło
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.
źródło
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.
źródło
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.
źródło
Spróbuj sfałszować deklarację lokalnego źródła w swoich
@font-face
dyrektywach.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
źródło
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.
źródło
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.
To działało dla mnie jak urok. Jeśli musisz ograniczyć dostęp do konkretnej domeny, zamień * na domenę.
źródło
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:
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.
źródło
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:
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
źródło
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!
źródło
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:
źródło
Spróbuj tego....
http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/
źródło
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.
źródło
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.
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:
LUB
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/
źródło
Nie musisz się bawić z ustawieniami, po prostu usuń cudzysłowy i spacje z rodziny czcionek:
to
staje się tym
źródło
W moim przypadku spowolniłem problem z wstawieniem kodu stylu czcionki
direclty w nagłówku strony index.html lub php, w tagu stylu. Pracuje dla mnie!
źródło
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.
źródło
Może to nie z powodu twojego kodu, tylko z powodu twojej konfiguracji Firefox.
Wypróbuj to od
Tool bar
Western do Unicodeźródło
Miałem ten sam problem i rozwiązałem go, dodając meta do treści:
Dzieje się tak w Firefoksie i Edge, jeśli w tekście HTML są zapisane znaki Unicode.
źródło
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
źródło
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.
źródło
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
źródło