आईई सीएसएस फॉन्ट-फेस पर काम करता है केवल जब आंतरिक लिंक

Question

हमारे webdesigner निम्नलिखित फॉन्ट-फेस के साथ एक सीएसएस पैदा कर दी है के माध्यम से नेविगेट:

@font-face { 
    font-family: 'oxygenregular'; 
    src: url('oxygen-regular-webfont.eot'); 
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('oxygen-regular-webfont.woff') format('woff'), 
     url('oxygen-regular-webfont.ttf') format('truetype'), 
     url('oxygen-regular-webfont.svg#oxygenregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

यह IE और Firefix पर ठीक काम करता है। लेकिन एक मुद्दा है: आईई पर फोंट सही ढंग से प्रस्तुत किए जाते हैं जब मैं आंतरिक वेब पेज लिंक का उपयोग करके पृष्ठ पर नेविगेट करता हूं। अगर मैं रीफ्रेश या बैक बटन दबाता हूं, तो फोंट को डिफ़ॉल्ट फ़ॉन्ट (टाइम्स न्यू रोमन) द्वारा प्रतिस्थापित किया जाता है।

वर्तमान में वेबसाइट HTTPS का उपयोग कर रही है लेकिन HTTP का उपयोग करते समय भी यही समस्या देखी गई थी। -

जब मैं भीतरी वेबसाइट लिंक का उपयोग कर नेविगेट, IE डेवलपर टूल (Shift F12) के नेटवर्क टैब में, मैं निम्न देखें: देखते हैं

/Content/oxygen-regular-webfont.eot? GET 200 application/vnd.ms-fontobject 

जब मैं ताज़ा/वापस बटन का उपयोग करें, दो और अन्य फोंट के लिए प्रविष्टियों के रूप में अच्छी तरह से:

/Content/oxygen-regular-webfont.woff GET 200 application/x-font-woff 
/Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream 

सीएसएस फ़ाइल अपने आप में एक निम्नलिखित तरीके से लोड किया जा रहा है:

/Content/site.css GET 200 text/css 

मैं दोनों WOFF और ttf को दूर करने की कोशिश की तो मैं था निम्नलिखित:

@font-face { 
    font-family: 'oxygenregular'; 
    src: url('oxygen-regular-webfont.eot'); 
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal; 
    font-style: normal; 
} 

लेकिन फिर भी आईई (छोड़कर यह WOFF डाउनलोड नहीं करता है और किसी भी अधिक ttf) उसी तरह बर्ताव करता है: जब वापस के माध्यम से नेविगेट प्रदर्शित करता है गलत वापस आने फोंट/ताज़ा।

मैं रीफ्रेश/बैक एक्शन पर सही फोंट लोड करने के लिए आईई कैसे बना सकता हूं?

Answer 1

मुझे एक समाधान मिला लेकिन मुझे यह कारण नहीं दिख रहा कि यह क्यों काम करता है (ठीक है, केवल एक कारण - यह आईई: डी) है।

मैंने जो किया वह अपाचे पर एक ही साइट डालने और फिर परीक्षण करने के लिए किया गया था। अपाचे पर रीफ्रेश बटन का उपयोग करते समय फोंट ठीक काम करते थे। फिर नेटवर्क इंस्पेक्टर में मैंने देखा कि Apache eot फ़ाइल के लिए 200 के बजाय 304 लौट रहा है और यह मुझे मारा - तो यह कैशिंग समस्या है। मैं अपने ASP.NET अनुप्रयोग और यकीन है कि पर्याप्त के लिए गया था - सुरक्षा कारणों से (और यह भी कैशिंग AJAX अनुरोध से बचने के लिए) कोई हर कैशिंग आप कल्पना कर सकते अक्षम कर दिया था:

 // prevent caching for security reasons 
     HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false); 
     HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1)); 
     HttpContext.Current.Response.Cache.SetValidUntilExpires(false); 
     HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); 
     HttpContext.Current.Response.Cache.SetNoServerCaching(); 

     // do not use any of the following two - they break CSS fonts on IE 
     HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
     HttpContext.Current.Response.Cache.SetNoStore(); 

जैसे ही मैं बाहर अंतिम दो पंक्तियों टिप्पणी की कोड के, अचानक फोंट आईई पर समस्याओं के बिना काम करना शुरू कर दिया। तो मुझे लगता है कि जवाब है: आईई फ़ॉन्ट को लोड नहीं कर सकता है अगर यह कैश नहीं है। मुझे नहीं पता कि समस्या तब होती है जब वापस ताज़ा/नेविगेट किया जाता है।

संपादित करें - वैकल्पिक समाधान

के बजाय टिप्पणी उन अंतिम दो पंक्तियों

// do not use any of the following two - they break CSS fonts on IE 
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
    HttpContext.Current.Response.Cache.SetNoStore(); 

बदलें true बजाय करने के लिए:

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true); 

यह अभी भी वापस और आगे नेविगेशन के अपवाद के साथ कोई कैश के लिए अनुमति देने के रूप में मैं इसे समझना चाहिए। MSDN - SetAllowResponseInBrowserHistory Method

Answer 2

सुनिश्चित करें कि यह एक पथक मुद्दा नहीं है, यानी आपकी सीएसएस फ़ाइल फोंट कहां से संबंधित है। आपके मामले में, आपको अपनी सीएसएस फ़ाइल को उसी फ़ोल्डर में अपनी फ़ॉन्ट फाइलों की आवश्यकता है।

Answer 3

मैं एक ही मुद्दे का सामना करना पड़ गए हैं। कोई कैश मूल्य, IE9 ठीक से फ़ॉन्ट लोड नहीं करता है:

मामले में अगर .eot फ़ाइल के हेडर कैश-नियंत्रण होता है। देव उपकरण परिणाम से पता चला है - 200, लेकिन स्तंभ प्राप्त दिखाया 400B एक ही समय सामग्री-लंबाई 70kb था,। मैं मूल्य कैश-नियंत्रण निम्नलिखित का उपयोग किया है: इस मुद्दे को ठीक करने के लिए अधिकतम उम्र = 0,।

Answer 4

वैश्विक प्रतिक्रिया NoCache और NoStore सेटिंग्स जाएंगी निकाले फोंट ठीक, लेकिन अगर आप उन सेटिंग्स तो स्पष्ट रूप से की जरूरत है कि एक जवाब नहीं है।

मेरे समझ है कि केवल समय सीमा समाप्त हो लगातार कैश्ड पृष्ठों के प्रदर्शन पर रोक नहीं लगेगी करने के लिए कैश की स्थापना; यह सर्वर से एक चेक मजबूर करता है, लेकिन अगर पेज संशोधित नहीं है (304 प्रतिक्रिया) (आमतौर पर?) अभी भी संचित संस्करण प्रदर्शित कर सकता है।

(वास्तव में पढ़ने यह अब यह मेरे लिए हुआ है कि ग्राहक कैश की स्थापना तुरंत SetNoServerCaching हमेशा नवीनीकृत करने के लिए ग्राहक पेज के लिए मजबूर हो सकता है के साथ संयोजन में समाप्त करने के लिए? लगता है जैसे कि यह प्रदर्शन निहितार्थ हालांकि हो सकता था।)

मेरे पास है ASP.NET MVC में एक नियंत्रक पर OutputCacheAttribute विशेषता का उपयोग कि IE फोंट नहीं तोड़ता है कैशिंग निष्क्रिय करने के लिए मिल गया।

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)] 
public class FooController : Controller 
{ 
    ... 
}  

मुझे पता NoStore SetCacheability (HttpCacheability.NoCache) के रूप में ही नहीं है बल्कि यह इस उद्देश्य के लिए काम करने के लिए लगता है।

आप कोड क्लीनर बनाने के लिए से प्राप्त करना विशेषता के साथ एक आधार नियंत्रक बना सकते हैं।

Answer 5

JustAMartin के answer किसी अन्य समाधान पर हमें का नेतृत्व किया:

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true); 

:

के बजाय टिप्पणी उन अंतिम दो पंक्तियों

// do not use any of the following two - they break CSS fonts on IE 
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); 
    HttpContext.Current.Response.Cache.SetNoStore(); 

हम निम्न पंक्ति जोड़ा यह अभी भी exce के साथ नो-कैश की अनुमति देनी चाहिए जैसा कि मैं इसे समझता हूं, पीछे और आगे नेविगेशन का पशन। MSDN - SetAllowResponseInBrowserHistory Method

Answer 6

मैं सिर्फ एक ही बग था, और जो लोग एक शुद्ध समाधान (गैर सटीक-प्रौद्योगिकी से संबंधित) करना चाहते हैं के लिए: यदि आप यह सुनिश्चित करें कि फॉन्ट हेडर आप भेज रहे हैं no-cache नहीं कह रहे हैं बनाने की जरूरत है।

"cache-control: no-cache" 

और

"pragma: no-cache" 

उन दोनों ब्राउज़र ही कह रहे हैं, पहले एक HTTP1 का हिस्सा है: क्या पहले लिखा गया था के शीर्ष पर, वहाँ वास्तव में दो हेडर जो यह कर सकते हैं कर रहे हैं। 1, दूसरा एक पुराना है (HTTP1.0)।

अब, समाधान:

• तुम सच में बिना क्लाइंट-साइड संचय फोंट (? और अन्य फ़ाइलों) की सेवा करना चाहते हैं, "cache-control" to "max-age=0" सेट; आप प्रज्ञा हेडर छोड़ सकते हैं, यह अप्रचलित है (या इसे "pragma: cache" पर सेट करें)।
• यदि आप वास्तव में कैशिंग करना चाहते हैं: no-cache मान हटाएं, और उचित अधिकतम आयु निर्धारित करें (उदा। "cache-control: max-age=3600" - एक घंटा कैश)। प्रगमा को "pragma: cache" पर सेट किया जा सकता है या पूरी तरह हटा दिया जा सकता है।

Answer 7

मुझे इस समस्या को हल करने के लिए एक वैकल्पिक समाधान मिला।

मैंने एक अलग फ़ॉन्ट फ़ाइल के रूप में लोड करने के बजाय सीधे स्टाइलशीट में फ़ॉन्ट एम्बेड किया है। यह विंडोज, मैक, आईओएस, एंड्रॉइड इत्यादि सहित सभी ब्राउज़रों में बिल्कुल ठीक काम करता है और वेबपृष्ठ में HTTP अनुरोधों की संख्या को कम करने में मदद करता है।

इसे हेडर कैश-कंट्रोल में किसी भी बदलाव की आवश्यकता नहीं होगी।

@font-face { font-family: '<FONT NAME>'; src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64_ENCODED>) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,,<BASE64_ENCODED>) format('truetype'); font-weight: normal; font-style: normal; }

आप उपयोग कर सकते हैं में निर्मित फ़ॉन्ट एन्कोडिंग के लिए ओएस एक्स या लिनक्स में base64 आदेश।

Answer 8

निर्धारित न करें वैरी अनुरोध हेडर

https करने के लिए कोई फ़ॉन्ट लोड हो रहा है

Vary:Accept-Encoding,https 

वर्क्स

Vary:Accept-Encoding 

कैश हैडर स्थापना avoid delayed font loading लिए आवश्यक है।