Herunterladen der heruntergeladenen Schriftart fehlgeschlagen, OTS-Analysefehler: ungültiges Versions-Tag + Schienen 4

Ich mache Assets vorkompiliert und führe die Anwendung im Produktionsmodus aus. Nach dem Kompilieren beim Laden meiner Indexseite wurden in der Chrome-Konsole folgende Warnungen angezeigt:

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

Das Problem ist, dass keine Symbole geladen werden, sondern dass Quadrate angezeigt werden .

Wir haben die benutzerdefinierten Schriftarten verwendet und der Code lautet:

@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;
}

Ich weiß nicht, was an meinem Ende fehlt. Ich habe viel gesucht und auch eine Lösung ausprobiert, aber keinen Erfolg erzielt. Im Entwicklungsmodus funktioniert es einwandfrei, aber ich weiß nicht, warum es im Produktionsmodus quadratisch angezeigt wird.

Ich habe genau den gleichen Fehler erhalten, und in meinem Fall stellte sich heraus, dass der Pfad für die @font-faceDeklaration falsch war . Der Webinspektor hat sich nie mit einem 404 beschwert, da der von uns verwendete Entwicklungsserver (Live-Server) so konfiguriert wurde, dass die Standard-index.html für alle 404: s bereitgestellt wird. Ohne Details zu Ihrem Setup zu kennen, könnte dies ein wahrscheinlicher Schuldiger sein.

Wenn IIS als Server und .net 4 / 4.5 ausgeführt wird, fehlen möglicherweise Definitionen für MIME / Dateierweiterungen in Web.config - wie folgt:

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

Ich hatte das gleiche 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

Wenn beim Versuch, Ihre Schriftart festzuschreiben, diese Fehlermeldung angezeigt wird, liegt ein Problem mit .gitattributes " warning: CRLF will be replaced by LF" vor.

Die Lösung hierfür ist das Hinzufügen der Schriftart, mit der Sie das Problem in .gitattributes erhalten

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

Dann habe ich beschädigte Schriftdateien gelöscht und die neuen Schriftdateien erneut angewendet und funktioniert hervorragend.

Versuchen

@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;
}

und benennen Sie Ihre Datei in um application.css.scss

Ich hatte eine beschädigte Schriftart, obwohl sie problemlos geladen zu werden schien und unter Quellen in Chrome devtools angezeigt zu werden schien, war die Anzahl der Bytes nicht korrekt, daher habe ich sie erneut heruntergeladen und sie behoben.

Geben Sie einfach das Format unter @ font-face wie folgt an:

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

Ich hatte das gleiche Problem und das lag daran, dass der Git diese Dateien als Text behandelte. Beim Auschecken der Dateien in Build-Agenten wurde die Binärdatei nicht beibehalten.

Fügen Sie dies Ihrer .gitattributesDatei hinzu und versuchen Sie es.

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

Bei der Verwendung angular-clifunktioniert dies für mich:

<?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>

Ich habe folgende Fehler erhalten:

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

Dies wurde behoben, nachdem die Rohdatei direkt von folgender Adresse heruntergeladen wurde:
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Das Problem war, dass beim Herunterladen der Datei ein Proxy-Fehler aufgetreten ist (er enthielt die HTML-Fehlermeldung).

Gehen Sie auf GitHub zu der unten angegebenen Adresse und laden Sie jede der FontAwesome-Dateien herunter.

https://github.com/FortAwesome/font-awesome-sass/tree/master/assets/fonts/font-awesome

... aber anstatt mit der rechten Maustaste zu klicken und den Link unter zu speichern, klicken Sie auf jede der Dateien und speichern Sie sie über die Schaltfläche "Herunterladen".

Ich fand, dass das Speichern des Links als heruntergeladene HTML-Seite und nicht die FontAwesome-Datei binär selbst.

Sobald ich alle Binärdateien hatte, funktionierte es für mich.

Mein Problem war, dass ich zwei Schriftarten deklariert habe, und scss scheint zu erwarten, dass Sie den Namen der Schriftart deklarieren.

nach deinem @font-face{} musst du deklarieren $my-font: "OpenSans3.0 or whatever";

und das für jede Schriftart.

:-)

Für Angular -Cli- und Webpack- Benutzer habe ich vermutet, dass beim Importieren der Schriftarten in eine CSS-Datei ein Problem auftritt. Geben Sie daher auch den mit einfachen Anführungszeichen codierten URL-Speicherort wie folgt an:

@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;
}

Dieser Beitrag mag alt sein, aber das ist die Lösung, die für mich funktioniert hat.

Ich hatte das gleiche Problem.

Das Hinzufügen der Schriftartversion (z. B. ?v=1.101) zu den Schriftart-URLs sollte den Trick tun;)

@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 */
}

Ein Klick (rechter Mausklick) auf die TTF-Version der Schriftart und die Auswahl von "Informationen" (Mac OSX) "Eigenschaften" (Windows) im Kontextmenü sollten ausreichen, um auf die Schriftartversion zuzugreifen.

Wenn Sie Chrome verwenden, fügen Sie eine OTF-Version (Opentype) Ihrer Schriftart hinzu, wie unten gezeigt:

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

Prost!

Wenn Sie Bootstrap verwenden, aktualisieren Sie die Bootstrap-CSS ( bootstrap.min.css) - und Fonts-Dateien. Ich habe mein Problem mit dieser Lösung behoben.

Ich verwende ASP.NET mit IIS und es stellte sich heraus, dass ich nur den MIME-Typ zu IIS hinzufügen musste: '.woff2' / 'application / font-woff'

Nachdem ich viele andere Ansätze ausprobiert und viele Neuinstallationen und Überprüfungen durchgeführt habe, habe ich das Problem behoben, indem ich Browserdaten aus Chrome (zwischengespeicherte Bilder und Dateien) gelöscht und die Seite dann aktualisiert habe.

Ich hatte das gleiche Problem beim Öffnen und Speichern .woffund. woff2Dateien durch Sublime Text mit EditorConfigOption end_of_line = lf. Ich habe gerade Dateien in den Schriftartenordner kopiert, ohne sie in Sublime zu öffnen, und das Problem wurde behoben.

Wenn andere Antworten nicht funktionierten, versuchen Sie:

1. Überprüfen Sie die .htaccess-Datei

   # 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. Server-Cache löschen

3. Browser-Cache leeren und neu laden

Überprüfen Sie die CSS-Datei Ihrer Schriftart. (fontawesome.css / fontawesome.min.css) sehen Sie wie folgt:

@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
}

Nach dem Dateierweiterungsnamen Ihrer Schriftart wird das Versions-Tag angezeigt . Mögen:

-v = 4.6.3

Sie müssen nur dieses Tag aus Ihrer CSS-Datei entfernen. Nachdem Sie dies entfernt haben, müssen Sie zu Ihrem Schriftartenordner gehen. Und Sie werden sehen:

Um die Dateien dieser Schriftart zu bilden, müssen Sie nur das Versions-Tag -v = 4.6.3 aus dem Dateinamen entfernen .

Dann wird das Problem behoben.

Nur für den Fall, dass dies für jemanden relevant ist. Ich habe genau den gleichen Fehler mit ASP.NET und C # in Visual Studio erhalten. Als ich die App im Visual Studio startete, funktionierte sie, aber ich bekam dieses Problem. In der Zwischenzeit stellte sich heraus, dass der Pfad zu meinem Projekt das Zeichen "#" (c: \ C # \ testapplication) enthielt. Dies scheint IIS Express (möglicherweise auch IIS) zu verwirren und verursacht dieses Problem. Ich denke, "#" ist ein reserviertes Zeichen irgendwo in ASP.NET oder darunter. Das Ändern des Pfades hat geholfen und jetzt funktioniert es wie erwartet.

Grüße Christof

Was mir geholfen hat war, dass ich die Reihenfolge geändert habe. Die .eot wird zuerst geladen, aber mein Fehler war beim Laden der .eot. Also habe ich die .eot als erste src für woff2 über Bord geworfen und der Fehler ist verschwunden.

Der Code lautet also jetzt:

@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;
}

Und ist war:

@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";

Ich hatte das gleiche Problem, dies funktionierte für mich https://github.com/webpack/webpack/issues/1468