Robię prekompilację zasobów i uruchamiam aplikację w trybie produkcyjnym. Po kompilacji, kiedy ładuję moją stronę indeksową, w konsoli chrome pojawiły się następujące ostrzeżenia:
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0
prospects:1 OTS parsing error: invalid version tag
Problem polega na tym, że nie ładuje ikon zamiast tego, że pokazuje kwadraty .
użyliśmy niestandardowych czcionek, a kod to:
@font-face {
font-family: 'icomoon';
src: font-url('icomoon.eot');
src: font-url('icomoon.eot?#iefix') format('embedded-opentype'),
font-url('icomoon.ttf') format('truetype'),
font-url('icomoon.woff') format('woff'),
font-url('icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
Nie wiem, czego mi brakuje. Szukałem dużo i wypróbowałem rozwiązanie, ale nie udało mi się. W trybie programistycznym działa dobrze, ale nie wiem, dlaczego pokazuje się kwadrat w trybie produkcyjnym.
css
asset-pipeline
ruby-on-rails-4.1
custom-font
Deepti Kakade
źródło
źródło
Odpowiedzi:
Otrzymałem dokładnie ten sam błąd, aw moim przypadku okazało się, że jest to spowodowane złą ścieżką do
@font-face
deklaracji. Inspektor sieci nigdy nie skarżył się na błąd 404, ponieważ używany przez nas serwer deweloperski (serwer na żywo) był skonfigurowany do obsługi domyślnego pliku index.html na dowolnym 404: s. Nie znając żadnych szczegółów na temat konfiguracji, może to być prawdopodobny winowajca.źródło
CssRewriteUrlTransform
w BundleConfig.Jeśli działa w usługach IIS jako serwer i .net 4 / 4.5, może brakować definicji rozszerzeń MIME / plików w pliku Web.config - na przykład:
źródło
Miałem ten sam problem.
, OTS parsing error: Failed to convert WOFF 2.0 font to SFNT (index):1 Failed to decode downloaded font: http://dev.xyz/themes/custom/xyz_theme/fonts/xyz_rock/rocksansbold/Rock-SansBold.woff2
Jeśli otrzymałeś ten komunikat o błędzie podczas próby zatwierdzenia czcionki, jest to problem z .gitattributes "
warning: CRLF will be replaced by LF
"Rozwiązaniem tego problemu jest dodanie dowolnej czcionki, z którą występuje problem, w .gitattributes
Następnie usunąłem uszkodzone pliki czcionek i ponownie zastosowałem nowe pliki czcionek i działa świetnie.
źródło
próbować
i zmień nazwę pliku na
application.css.scss
źródło
Miałem uszkodzoną czcionkę, chociaż wydawało się, że ładuje się bez problemu, a pod Źródłami w Chrome devtools pojawił się komunikat, liczba bajtów nie była poprawna, więc pobrałem ponownie i rozwiązałem problem.
źródło
Po prostu podaj format @ font-face w następujący sposób:
źródło
Miałem ten sam problem, a to dlatego, że git traktuje te pliki jako tekst. Więc podczas sprawdzania plików w agentach kompilacji, binarny nie był utrzymywany.
Dodaj to do swojego
.gitattributes
pliku i spróbuj.źródło
Podczas używania
angular-cli
to działa dla mnie:źródło
Otrzymywałem następujące błędy:
który został naprawiony po pobraniu surowego pliku bezpośrednio z:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2
Problem polegał na tym, że podczas pobierania pliku wystąpił błąd serwera proxy (zawierał komunikat o błędzie HTML).
źródło
Przejdź pod poniższy adres w GitHub i pobierz każdy z plików FontAwesome.
https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome
... ale zamiast klikać prawym przyciskiem myszy i zapisywać łącze jako, kliknij każdy z plików i użyj przycisku „Pobierz”, aby je zapisać.
Okazało się, że zapisywanie linku jako pobranej strony HTML, a nie samego pliku binarnego FontAwesome.
Kiedy już miałem wszystkie pliki binarne, zadziałało to dla mnie.
źródło
Mój problem polegał na tym, że deklarowałem dwie czcionki, a scss wydaje się oczekiwać, że zadeklarujesz nazwę czcionki.
po twoim
@font-face{}
musisz zadeklarować$my-font: "OpenSans3.0 or whatever";
i to dla każdego kroju czcionki.
:-)
źródło
W przypadku użytkowników angular -cli i webpack podejrzewałem, że wystąpił problem podczas importowania czcionek w pliku css, więc proszę również podać adres URL zakodowany pojedynczymi cudzysłowami w następujący sposób -
Ten post może być stary, ale to rozwiązanie zadziałało dla mnie.
źródło
Miałem ten sam problem.
Dodanie wersji czcionki (np.
?v=1.101
) Do adresów URL czcionki powinno załatwić sprawę;)Kliknięcie (prawy przycisk myszy) na wersję TTF czcionki i wybranie „Get Info” (Mac OSX) „Properties” (Windows) w menu kontekstowym powinno wystarczyć, aby uzyskać dostęp do wersji czcionki.
źródło
Jeśli korzystasz z przeglądarki Chrome, spróbuj dodać wersję czcionki typu OpenType (OTF), jak pokazano poniżej:
Twoje zdrowie!
źródło
Jeśli używasz bootstrap, zaktualizuj
bootstrap.min.css
plik bootstrap css ( ) i pliki czcionek. Rozwiązałem mój problem tym rozwiązaniem.źródło
Używam ASP.NET z IIS i okazuje się, że po prostu musiałem dodać typ MIME do IIS: „.woff2” / „application / font-woff”
źródło
Po wypróbowaniu wielu innych podejść oraz wielu ponownych instalacjach i sprawdzeniach właśnie rozwiązałem problem, usuwając dane przeglądania z Chrome (obrazy i pliki zapisane w pamięci podręcznej), a następnie odświeżając stronę.
źródło
Miałem ten sam problem, kiedy otworzyłem i zapisałem
.woff
i.woff2
pliki przez Sublime Text zEditorConfig
opcjąend_of_line = lf
. Po prostu skopiowałem pliki do folderu czcionek bez otwierania ich w Sublime i problem został rozwiązany.źródło
Jeśli inne odpowiedzi nie pomogły, spróbuj:
sprawdź plik .htaccess
# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg
wyczyść pamięć podręczną serwera
źródło
Sprawdź plik css swojej czcionki. (fontawesome.css / fontawesome.min.css) , zobaczysz tak:
zobaczysz znacznik wersji po nazwie rozszerzenia pliku czcionki . Lubić:
Musisz tylko usunąć ten tag z pliku css. Po usunięciu tego musisz przejść do folderu z czcionkami, a zobaczysz:
I, utwórz pliki tych czcionek, wystarczy usunąć znacznik wersji -v = 4.6.3 z nazwy pliku.
Wtedy problem zostanie rozwiązany.
źródło
na wypadek, gdyby było to dla kogoś istotne. Otrzymałem dokładnie ten sam błąd przy użyciu ASP.NET i C # w programie Visual Studio. Kiedy uruchamiałem aplikację w studiu wizualnym, działała, ale napotkałem ten problem. W międzyczasie okazało się, że ścieżka do mojego projektu zawierała znak „#” (c: \ C # \ testapplication). To wydaje się mylić IIS Express (być może także IIS) i powoduje ten problem. Myślę, że „#” to zastrzeżony znak gdzieś w ASP.NET lub poniżej. Zmiana ścieżki pomogła i teraz działa zgodnie z oczekiwaniami.
Pozdrawiam Christof
źródło
code
Nie udało się zdekodować pobranej czcionki: localhost: 52963 / css /…Pomogło mi to, że zmieniłem kolejność. Plik .eot get jest ładowany jako pierwszy, ale mój błąd polegał na ładowaniu pliku .eot. Więc porzuciłem .eot jako pierwszy src dla woff2 i błąd zniknął.
Więc kod jest teraz:
A było:
źródło
źródło
Miałem ten sam problem, to zadziałało dla mnie https://github.com/webpack/webpack/issues/1468
źródło