Webfont (font awesome) funktioniert nicht Corrently Offline

Question

Ich habe Probleme bekommen, Webfonts (Schriftart super um genau zu sein) richtig angezeigt, während meine App offline ist.

so habe ich meine Schrift im Manifest

fonts/fontawesome-webfont.ttf?v4.1.0 

Wenn die App zum ersten Mal geladen online, die ttf-Datei geladen und korrekt in der AppCache und Anzeigen gespeichert wird.

aber sobald Sie das Netzwerk trennen, so dass die App offline läuft, funktioniert alles auseinander fein von den Schrift basierte Symbole (sie angezeigt werden als quadratische Felder, als ob die Schriftart nicht geladen ist)

Ich habe sah in chrome AppCache (chrome: // AppCache-Einbauten) und die Datei ist es

Explicit, https://mysite.com/fonts/fontawesome-webfont.ttf?v4.1.0 141 kB 

ich auf die Datei zugreifen kann und den Header

HTTP/1.1 200 OK 
Content-Type: font/ttf 
Last-Modified: Fri, 23 May 2014 07:40:31 GMT 
Accept-Ranges: bytes 
ETag: "cbe2e465a76cf1:0" 
Server: Microsoft-IIS/8.5 
X-Powered-By: ASP.NET 
Date: Thu, 05 Jun 2014 08:05:57 GMT 
Content-Length: 141564 

Es gibt eine coupl richtig scheint e verdächtige Dinge in Chrom.

Application Cache Error event: Manifest fetch failed (6) https://mysite.com/appcache.manifest 

Aber ich gehe davon ist einfach, weil die App offline und kann keine aktualisierte Manifest

Die zweite bekommen, ist

Resource interpreted as Font but transferred with MIME type text/html: "https://mysite.com/fonts/fontawesome-webfont.ttf?v=4.1.0" 

Das ist die einzige Sache ist, dass ich sehen kann, dass sein könnten die Ursache.

Jeder Einblick wäre erstaunlich, danke im Voraus!

Answer 1

Damit diese Funktion in meinem Projekt funktioniert, musste ich dem Appcache Folgendes hinzufügen.

CACHE: 
#path to fa css 
public/styles/fonts/FontAwesome.otf 
public/styles/fonts/fontawesome-webfont.eot 
public/styles/fonts/fontawesome-webfont.svg 
public/styles/fonts/fontawesome-webfont.ttf 
public/styles/fonts/fontawesome-webfont.woff 

NETWORK: 
* 

FALLBACK: 
/public/styles/fonts/fontawesome-webfont.woff public/styles/fonts/fontawesome-webfont.woff 
/public/styles/fonts/fontawesome-webfont.eot public/styles/fonts/fontawesome-webfont.eot 
/public/styles/fonts/fontawesome-webfont.svg public/styles/fonts/fontawesome-webfont.svg 
/public/styles/fonts/fontawesome-webfont.ttf public/styles/fonts/fontawesome-webfont.ttf 
/public/styles/fonts/FontAwesome.otf public/styles/fonts/FontAwesome.otf 

Das Netzwerk stellte immer noch die Anforderung für die Symbole, obwohl sie zwischengespeichert wurden. Durch Hinzufügen des Ausweichzeichens für die Symbole wurde die Anforderung abgefangen und die zwischengespeicherte Version bereitgestellt.

Answer 2

Als eine Möglichkeit, dies für Offline-Cache zu umgehen, können Sie einen benutzerdefinierten Stil direkt nach dem Laden der Schriftart super css-Bibliothek mit ihnen entfernt hinzufügen.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
     
 
<style> 
 
/*Temporary Fix for Font Awesome ApplicatonManifest offline Cache */ 
 
@font-face { 
 
    font-family: 'FontAwesome'; 
 
    src: url('../fonts/fontawesome-webfont.eot'); 
 
    src: url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'),  url('../fonts/fontawesome-webfont.woff2') format('woff2'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg') format('svg'); 
 
     font-weight: normal; 
 
     font-style: normal; 
 
} 
 
</style>

Answer 3

erleben ich dies hatte aber die richtige AppCache config in oConn Antwort gezeigt - ich nur in der Lage war, diese Funktion zu erhalten, indem die Version nach dem Dateinamen in der CSS-Datei zu entfernen:

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); ... 

in den fünf oder so dort, wo es an die uRL angehängt wird, ist es zu dieser Veränderung -

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../fonts/fontawesome-webfont.eot'); ... 

Dies ist jetzt im Abschnitt Fehlerbehebung in der font-awesome-FAQ für Phonegap-Projekte (ich verwende nicht Phonegap, obwohl) - und das Problem wird in Github Problem 3632 für Fontawesome zitiert.