Webfont (फ़ॉन्ट भयानक) काम नहीं कर रहा Corrently ऑफलाइन

Question

मैं मुद्दों वेबफ़ॉन्ट (फ़ॉन्ट विशिष्ट होना भयानक) हो रही किया गया है मेरे ऐप जबकि ठीक से दिखाई ऑफ़लाइन है।

तो मैं एप्लिकेशन पहली बार लोड ऑनलाइन, ttf फ़ाइल लोड और appcache और प्रदर्शित करता है में सही ढंग से संग्रहीत हो जाता है जब प्रकट

fonts/fontawesome-webfont.ttf?v4.1.0 

में मेरे फ़ॉन्ट है।

हालांकि, जैसे ही आप नेटवर्क डिस्कनेक्ट के रूप में इसलिए एप्लिकेशन ऑफ़लाइन चलाता है, सब ठीक अलग फॉन्ट आधारित माउस से काम करता है (वे वर्ग बक्से के रूप में प्रदर्शित के रूप में अगर फॉन्ट लोड नहीं किया गया है)

मैंने क्रोम के appcache में देखा (क्रोम: // appcache-internals) और फ़ाइल वहाँ

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

मैं फ़ाइल और हैडर उपयोग कर सकते हैं लगता है सही

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 

एक coupl रहे हैं है क्रोम में संदिग्ध चीजों की ई।

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

लेकिन यह मुझे लगता है बस क्योंकि एप्लिकेशन ऑफ़लाइन है और एक अद्यतन प्रकट

दूसरा नहीं मिल सकता है

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

है यह केवल एक चीज है कि मैं देख सकते हैं कि हो सकता है कारण।

किसी भी अंतर्दृष्टि अद्भुत, अग्रिम धन्यवाद होगा!

Answer 1

मैं appcache के लिए निम्न जोड़ने के लिए किया था मेरी परियोजना पर काम करने के लिए इस सुविधा करने के लिए।

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 

नेटवर्क अभी भी आइकन के लिए अनुरोध कर रहा था, भले ही वे कैश किए गए थे। आइकन के लिए फ़ॉलबैक जोड़ने से अनुरोध पकड़ा गया और कैश किए गए संस्करण की सेवा की गई।

Answer 2

ऑफ़लाइन कैश के लिए इसे बाईपास करने के तरीके के रूप में आप उनके साथ फ़ॉन्ट भयानक सीएसएस लाइब्रेरी को लोड करने के बाद सीधे एक कस्टम शैली जोड़ सकते हैं।

<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

मैं इस अनुभव लेकिन सही appcache oconn के जवाब में दिखाया गया config था - मैं केवल सीएसएस फ़ाइल में फ़ाइल नाम के बाद संस्करण निकाल कर इस काम कर प्राप्त करने में सक्षम था:

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

पांच या तो स्थानों पर जहां यह यूआरएल में जोड़ा जाता है में

, यह करने के लिए इसे बदलने -

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

यह अब फोनगैप प्रोजेक्ट्स के लिए फ़ॉन्ट-भयानक फ़ंक्शन के समस्या निवारण खंड में है (हालांकि मैं फोनगैप का उपयोग नहीं कर रहा हूं) - और समस्या को फ़ॉन्टशॉट के लिए जीथ्यूब अंक 3632 में उद्धृत किया गया है।