Nie udało się zdekodować pobranej czcionki, błąd analizy OTS: nieprawidłowy tag wersji + szyny 4

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.

Otrzymałem dokładnie ten sam błąd, aw moim przypadku okazało się, że jest to spowodowane złą ścieżką do @font-facedeklaracji. 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.

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:

<system.webServer>
	<staticContent>
      <remove fileExtension=".eot" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <remove fileExtension=".ttf" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <remove fileExtension=".svg" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <remove fileExtension=".woff" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
</system.webServer>

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

*.ttf     -text diff
*.eot     -text diff
*.woff    -text diff
*.woff2   -text diff

Następnie usunąłem uszkodzone pliki czcionek i ponownie zastosowałem nowe pliki czcionek i działa świetnie.

próbować

@font-face {
  font-family: 'icomoon';
  src: asset-url('icomoon.eot');
  src: asset-url('icomoon.eot?#iefix') format('embedded-opentype'),
       asset-url('icomoon.ttf') format('truetype'),
       asset-url('icomoon.woff') format('woff'),
       asset-url('icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

i zmień nazwę pliku na application.css.scss

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.

Po prostu podaj format @ font-face w następujący sposób:

@font-face {
  font-family: 'Some Family';
  src: url('/fonts/fontname.ttf') format('ttf'); /* and this for every font */
}

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 .gitattributespliku i spróbuj.

*.eot binary
*.ttf binary
*.woff binary
*.woff2 binary

Podczas używania angular-clito działa dla mnie:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".eot" />
            <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
            <remove fileExtension=".ttf" />
            <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
            <remove fileExtension=".svg" />
            <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
            <remove fileExtension=".woff" />
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
            <remove fileExtension=".woff2" />
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
        <rewrite>
            <rules>
                <rule name="AngularJS" stopProcessing="true">
                    <match url="^(?!.*(.bundle.js|.bundle.js.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.chunk.js|.chunk.js.map|.png|.jpg|.ico|.eot|.svg|.woff|.woff2|.ttf|.html)).*$" />
                    <conditions logicalGrouping="MatchAll">
                    </conditions>
                    <action type="Rewrite" url="/"  appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Otrzymywałem następujące błędy:

Failed to decode downloaded font: [...]/fonts/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

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

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.

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.

:-)

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 -

@font-face {
font-family: 'some_family';
src: url('./assets/fonts/folder/some_family-regular-webfont.woff2') format('woff2'),
     url('./assets/fonts/folder/some_family-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Ten post może być stary, ale to rozwiązanie zadziałało dla mnie.

Miałem ten sam problem.

Dodanie wersji czcionki (np. ?v=1.101) Do adresów URL czcionki powinno załatwić sprawę;)

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v15-latin-600.eot?v=1.101'); /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v15-latin-600.woff2?v=1.101') format('woff2'), /* Super Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.woff?v=1.101') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

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.

Jeśli korzystasz z przeglądarki Chrome, spróbuj dodać wersję czcionki typu OpenType (OTF), jak pokazano poniżej:

    ...
     url('icomoon.otf') format('opentype'),
    ...

Twoje zdrowie!

Jeśli używasz bootstrap, zaktualizuj bootstrap.min.cssplik bootstrap css ( ) i pliki czcionek. Rozwiązałem mój problem tym rozwiązaniem.

Używam ASP.NET z IIS i okazuje się, że po prostu musiałem dodać typ MIME do IIS: „.woff2” / „application / font-woff”

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

Miałem ten sam problem, kiedy otworzyłem i zapisałem .woffi. woff2pliki przez Sublime Text z EditorConfigopcją end_of_line = lf. Po prostu skopiowałem pliki do folderu czcionek bez otwierania ich w Sublime i problem został rozwiązany.

Jeśli inne odpowiedzi nie pomogły, spróbuj:

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

2. wyczyść pamięć podręczną serwera

3. wyczyść pamięć podręczną przeglądarki i załaduj ponownie

Sprawdź plik css swojej czcionki. (fontawesome.css / fontawesome.min.css) , zobaczysz tak:

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot-v=4.6.3.htm');
    src: url('../fonts/fontawesome-webfont.eot#iefix-v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2-v=4.6.3.htm') format('woff2'), url('../fonts/fontawesome-webfont.woff-v=4.6.3.htm') format('woff'), url('../fonts/fontawesome-webfont.ttf-v=4.6.3.htm') format('truetype'), url('../fonts/fontawesome-webfont.svg-v=4.6.3.htm#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

zobaczysz znacznik wersji po nazwie rozszerzenia pliku czcionki . Lubić:

-v = 4,6,3

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.

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

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:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

A było:

@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?9h1pxj');
  src:  url('assets/fonts/icomoon.eot?9h1pxj#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.woff2?9h1pxj') format('woff2'),
    url('assets/fonts/icomoon.ttf?9h1pxj') format('truetype'),
    url('assets/fonts/icomoon.woff?9h1pxj') format('woff'),
    url('assets/fonts/icomoon.svg?9h1pxj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

For it is fixed by using below statement in app.web.scss
    $fa-font-path:   "../../node_modules/font-awesome/fonts/" !default;
    @import "../../node_modules/font-awesome/scss/font-awesome";

Miałem ten sam problem, to zadziałało dla mnie https://github.com/webpack/webpack/issues/1468