it-swarm.com.de

Fehler beim Dekodieren der heruntergeladenen Schrift

Dies ist ein Fehler, den ich in Chrome bekomme. Leider hat die Suche nach mir nicht viel gebracht. Die Schriftart selbst wird korrekt angezeigt. Ich bekomme jedoch immer noch diese Fehlermeldung. Genauer gesagt ist dies die vollständige Warnung:

"Fehler beim Dekodieren der heruntergeladenen Schriftart: http: // localhost: 8000/app/fonts/Lato/ "

Meine CSS sind diese:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

Ich verstehe es einfach nicht. Die Schriftart wird korrekt angewendet, die Warnung ist jedoch immer vorhanden. Beim Versuch, Sans-Serif zu verwenden, wird die Schriftart auf die normale Browser-Schriftart zurückgesetzt, sodass dies möglicherweise der Fall ist. Ich bin mir jedoch nicht sicher, und selbst nach der Suche habe ich nichts gefunden. Vielen Dank!

BEARBEITEN

Es gibt verschiedene Schriftdateien, die alle aus derselben Familie stammen. Ich versuche alle zu laden. Die Schriftdateien sind .ttf. Ich lade sie aus einem lokalen Ordner, und es gibt verschiedene Font-Dateien wie Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttf usw.

99
Luís Ferreira

In der css-Regel müssen Sie die Erweiterung der Datei ..__ hinzufügen. Dieses Beispiel mit der tiefsten Unterstützung, die möglich ist:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

BEARBEITEN:

"Fehler beim Dekodieren der heruntergeladenen Schriftart" bedeutet, dass die Schriftart beschädigt oder unvollständig ist (fehlende Metriken, erforderliche Tabellen, Namensdatensätze, eine Million mögliche Dinge).

Manchmal wird dieses Problem durch die Schriftart selbst verursacht. Google font bietet die richtige Schriftart, die Sie benötigen. Wenn jedoch ein Schriftbild erforderlich ist, verwende ich Transfonter , um das gesamte Schriftformat zu erstellen.

Manchmal ist der FTP-Client, der die Datei beschädigt (nicht in diesem Fall, weil er sich auf einem lokalen PC befindet). Achten Sie darauf, die Datei binär und nicht in ASCII zu übertragen.

65
Germano Plebani

Der Wechsel von format ('woff') zu format ('font-woff') hilft mir, dieses Problem gerade zu lösen.

Ändern Sie einfach eine kleine Änderung hier von Germano Plebani Antwort

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Bitte überprüfen Sie, ob Ihre Browserquellen sie öffnen können und welchen Typ sie haben

20
Fuad Husni

In Visual Studio ist ein ähnliches Problem aufgetreten, das durch einen falschen url()-Pfad zu der betreffenden Schriftart verursacht wurde.

Ich habe diese Fehlermeldung nach dem Ändern nicht mehr erhalten (zum Beispiel):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

zu diesem:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");
15
alex

Stellen Sie sicher, dass Ihr Server die Schriftartdateien mit dem richtigen mime/type sendet.

Ich habe vor kurzem das gleiche Problem mit nginx , da einige Schriftarten-Mime-Typen in der Vanilla /etc/nginx/mime.types-Datei fehlen.

Ich habe das Problem behoben, bei dem die fehlenden MIME-Typen an dem Ort, an dem ich sie brauchte, wie folgt hinzugefügt wurden:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include Vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

Sie können dies auch überprüfen, um die mime.types in nginx zu erweitern: Erweiterung der Standarddatei nginx mime.types

11
Matteo

Ich musste meinem Link-Tag type="text/css" hinzufügen. Ich habe es geändert von:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

zu:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

Nachdem ich es geändert hatte, verschwand der Fehler.

7
nabjoern

Ich hatte gerade das gleiche Problem und löste es, indem ich es änderte

src: url("Roboto-Medium-webfont.eot?#iefix")

zu

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

Dieses Problem tritt manchmal auf, wenn Sie die Schriftarten mit der falschen FTP-Methode hochladen/herunterladen. Die Schriftarten müssen per FTP mit der binären Methode und nicht mit ASCII bearbeitet werden. (Abhängig von Ihrer Stimmung kann es unangenehm erscheinen, lol.) Wenn Sie die Zeichensatzdateien mit der Methode ASCII ftp. Wenn Sie Ihre Dateien mit einer 'auto' -Methode ftp und diese Fehlermeldung erhalten, versuchen Sie, die binäre Methode mit ftp zu erzwingen.

4
Giuseppe

In meinem Fall wurde es durch eine falsche Pfaddatei verursacht.

3
Ebrahim

Dieser Fehler trat für mich auf, als ich auf eine Google-Schriftart mit https verwies. Als ich zu http wechselte, ging der Fehler weg. (und ja, ich habe es mehrmals versucht, um zu bestätigen, dass dies die Ursache war)

Also habe ich geändert:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Zu:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);
3
Venryx

Ich hatte das gleiche Problem mit font genial v4.4 und ich habe es behoben, indem ich das Format woff2 entfernt habe. Ich habe nur in Chrome eine Warnung erhalten.

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

In meinem Fall wurde dies durch das Erstellen einer SVN-Patch-Datei verursacht, die das Hinzufügen der Schriftdateien umfasste. So wie:

  1. Fügen Sie Zeichensatzdateien aus dem lokalen Dateisystem zum subversionierten Trunk hinzu
  2. Trunk funktioniert wie erwartet
  3. Erstellen Sie einen SVN-Patch für die Trunk-Änderungen, um das Hinzufügen von Zeichensatzdateien hinzuzufügen
  4. Wenden Sie den Patch auf einen anderen Zweig an
  5. Zeichensatzdateien werden zu einem subversionierten Zweig hinzugefügt (und können festgeschrieben werden), sind jedoch beschädigt, was zu Fehlern im OP führt.

Die Lösung bestand darin, die Schriftdateien direkt aus meinem lokalen Dateisystem in den Zweig hochzuladen. Ich gehe davon aus, dass dies der Fall ist, weil SVN-Patchdateien alles in das Format ASCII konvertieren müssen und nicht zwingend binär für Schriftdateien bleiben. Aber das ist nur eine Vermutung.

1
MegaMatt

Ich hatte auch dasselbe Problem, aber ich habe es gelöst, indem ich 'Content-Type': 'application/x-font-ttf' im Antwortheader für alle .ttf-Dateien hinzugefügt habe

1
usernaveen

Für mich war der Fehler vergessen, FTP in den Binärmodus zu versetzen, bevor die Fontdateien hochgeladen wurden.

Bearbeiten

Sie können dies testen, indem Sie andere Arten binärer Daten wie Bilder hochladen. Wenn sie auch nicht angezeigt werden, kann dies Ihr Problem sein.

1
Robert Gowland

für mich war es ein Problem mit LFS-Dateien, die nicht heruntergeladen wurden

git lfs fetch --all

problem behoben.

siehe https://github.com/git-lfs/git-lfs/issues/325

0
Amor

Wenn Sie Express verwenden, müssen Sie die Bereitstellung statischer Inhalte zulassen, indem Sie Folgendes hinzufügen: Var server = express (); Server.use (express.static ('./ public')); // Dabei ist public der App-Stammordner mit den darin enthaltenen Zeichensätzen auf einer beliebigen Ebene, d. h. public/fonts oder public/dist/fonts ... // Wenn Sie connect verwenden, verwenden Sie google für eine ähnliche Konfiguration.

0

Wenn es sich auf dem Server befindet (nicht in localhost), versuchen Sie, die Schriftarten manuell hochzuladen, da der FTP-Client (z. B. FileZilla) manchmal die Dateien beschädigt und das Problem verursachen kann. Für mich habe ich manuell über die Cpanel-Oberfläche hochgeladen.

0
Saidmamad

In meinem Fall waren beim Herunterladen einer Vorlage die Schriftdateien nur leere Dateien. Wahrscheinlich ein Problem mit dem Download. Chrome hat diesen generischen Fehler gegeben. Ich dachte zuerst, die Lösung des Wechsels von woff zu font-woff habe es gelöst, aber Chrome hat die Zeichensätze nur ignoriert. Meine Lösung bestand darin, die Zeichensätze einzeln zu finden und herunterzuladen/zu ersetzen.

0

Ich verwende .Net Framework 4.5/IIS 7

Um dies zu beheben, lege ich die Datei Web.config in den Ordner mit der Schriftdatei.

Inhalt von Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

In meinem Fall - mit React bei Gatsby - wurde das Problem gelöst, indem alle meine Pfade doppelt überprüft wurden. Ich habe React/Gatsby mit Sass verwendet und die Gatsby-Quelldateien haben an einer anderen Stelle nach den Schriftarten gesucht als die kompilierten Dateien. Nachdem ich die Dateien in jeden Pfad dupliziert hatte, war dieses Problem behoben.

0
Dave Kanter