wake-up-neo.com

FontAwesome lädt Schriftarten nicht lokal und in der elektronischen App

Ich habe FontAwesome mit npm heruntergeladen und dann die css-Datei und die Schriftarten in die richtigen Ordner im Stammverzeichnis der elektronischen Anwendung kopiert. 

So weit, ist es gut. Alles ist dort, wo es sein soll.

Wenn ich jetzt in meiner App auf FontAwesome verweise, werden die Symbole nicht geladen. Dies sind die Fehler, die ich in der Konsole bekomme:

Fehler beim Dekodieren der heruntergeladenen Schrift: 
file: ///path/to/fonts/fontawesome-webfont.woff2? v = 4.4.0 
OTS-Analysefehler: Fehler beim Konvertieren der WOFF 2.0-Schriftart in SFNT 

Fehler beim Dekodieren der heruntergeladenen Schrift: 
file: ////path/to/fonts/fontawesome-webfont.woff? v = 4.4.0
OTS-Analysefehler: falsche Dateigröße im WOFF-Header 

Fehler beim Dekodieren der heruntergeladenen Schrift:
Datei: ////path/to/fonts/fontawesome-webfont.ttf? v = 4.4.0
OTS-Analysefehler: falscher entrySelector für Tabellenverzeichnis

Ich habe bereits versucht, die CSS-Datei von FontAwesome durch Entfernen aller Versionsparameter zu ändern. Dies scheint jedoch nicht das Problem zu sein. Die Probleme werden sowohl beim Starten der App über electron . als auch beim Anzeigen der HTML-Datei im Browser angezeigt. 

UPDATE

Um einige Kommentare zu beantworten:

  • Dieses Problem tritt sowohl in Elektron als auch im Browser auf (getestet in Chrome und Firefox)
  • Ich verwende die neuesten Versionen von FontAwesome (4.4.0) und Electron (0.32.1) (Neuinstallation über npm)
  • css wird wie folgt geladen: <link rel="stylesheet" type="text/css" href="css/font-awesome.css" >
javascriptcssgruntjsfont-awesomeelectron
36
nozzleman

Das Problem lag in meiner Grunzdatei. Ich habe versucht, das Problem zu reproduzieren, indem ich einfach alle Abhängigkeiten manuell von den Websites seiner Hersteller herunterlade und in den entsprechenden Skriptordner meines Projekts steckte. 

Ich habe jetzt auf Schluck umgestellt und es funktioniert immer noch. Keine Ahnung, was ich mit Grunzen falsch gemacht habe ...

2
nozzleman

Ich hatte ein ähnliches Problem (vielleicht hilft diese Antwort jemandem). Ich verwende Maven zum Erstellen von Projekten (Java + JS). Maven Filter Plugin beschädigte binäre Schriftdateien. Ich musste Folgendes hinzufügen und ausschließen:

    <resources>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>true</filtering>
            <excludes>
                <exclude>**/*.woff</exclude>
                <exclude>**/*.ttf</exclude>
            </excludes>
        </resource>
        <resource>
            <directory>${project.sources}</directory>
            <filtering>false</filtering>
            <includes>
                <include>**/*.woff</include>
                <include>**/*.ttf</include>
            </includes>
        </resource>
    </resources>
59
Azee

In meiner Situation behandelte Git die Datei als Textdatei und verwirrte mit ihren "Zeilenenden". Dies hat die Datei beschädigt.

Anpassen der .gitconfig-Datei, um * .woff-Dateien als binär zu erkennen, dann die Datei entfernen und eine neue Kopie aus https://github.com/FortAwesome/Font-Awesome/raw/v4.2.0/fonts/fontawesome- webfont.woff hat das Problem für mich gelöst.

27
user892592

Für einige Benutzer, die sich für IIS bereitstellen, kann das Hinzufügen der Datei web.config (die Hauptdatei, nicht die im Controller-Verzeichnis) hilfreich sein.

<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="font/woff2" />
    </staticContent>
</system.webServer>

5
Stephen C

Ich hatte das gleiche Problem, als ich API Gateway zur Bereitstellung statischer Font-Dateien unter Amazon S3 verwendete.

Ich habe das Problem behoben, indem Sie */* als binäre Medientypen in der AWS Console hinzugefügt haben.

Weitere Informationen zur Verwaltung binärer Medientypen finden Sie unter https://docs.aws.Amazon.com/apigateway/latest/developerguide/api-gateway-payload-encodings-configure-with-console.html

4
piercus

versuchen Sie Folgendes: Rufen Sie das Schriftbild wie folgt am Anfang Ihrer CSS-Datei auf. 

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

Wenn Sie die bower verwenden, können Sie Ihren font-face folgendermaßen umschreiben:

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

Ich bin sicher, dass das gelöst ist, aber das hat für mich funktioniert, also ... Ich werde das hier belassen:

Ich hatte gerade das gleiche Problem mit einer Schrift, die ich vorher benutzt hatte. Es stellte sich heraus, dass dies durch ein Problem mit FTP verursacht wurde. Die Datei wurde als Text (ASCII) anstelle von binär hochgeladen, wodurch die Datei beschädigt wurde. Ich habe einfach die Font-Dateien neu hochgeladen, und dann hat alles funktioniert.

0
Andre Aquiles