फ़ायरफ़ॉक्स फ़ॉन्ट विस्मयकारी वेबफ़ॉन्ट सेट से आइकन रेंडर नहीं कर सकता

Question

फ़ायरफ़ॉक्स (विंडोज 7) में, आइकन और ग्लिफ़ जिन्हें फ़ॉन्ट विस्मयकारी पैकेज से कहा जाता है, ठीक से प्रस्तुत नहीं करते हैं। इसका एक उदाहरण खान अकादमी की वेबसाइट पर देखा जा सकता है। वीडियो के नीचे आइकन को हेक्स कोड के साथ बॉक्स के रूप में दिखाया गया है। इसका मतलब है कि यह फ़ायरफ़ॉक्स द्वारा डाउनलोड नहीं किया जा रहा है।

यह क्रोम (विंडोज 7), सफारी (मैक ओएस एक्स) और स्टेनलेस (मैक ओएस एक्स) पर कैसा दिखता है:

मुझे यह सवाल स्टैक ओवरफ्लो पर मिला, जो यह बताता है कि ऐसा क्यों होता है - CSS फ़ॉन्ट के src स्थान को घेरने के लिए एकल उद्धरण का उपयोग करता है। हालाँकि, मेरे पास खान अकादमी के सर्वरों के लिए कोई लिखित पहुँच नहीं है इसलिए मैं वास्तविक वेबसाइट को संशोधित नहीं कर सकता। मैं जानना चाहता हूं कि क्या यह फ़ायरफ़ॉक्स और कैसे तय किया जा सकता है। मैं Greasemonkey स्क्रिप्ट चला सकता हूँ अगर वह मदद करेगा। मैंने पहले से ही फ़ॉन्ट को मैन्युअल रूप से डाउनलोड करने और इसे विंडोज के फोंट फ़ोल्डर में जोड़ने की कोशिश की है लेकिन यह मदद नहीं करता है।

संदर्भ के लिए, सीएसएस जो इस फ़ॉन्ट को सेट करता है (फ़ायरफ़ॉक्स द्वारा ठीक से संसाधित नहीं किया गया है):

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

अपडेट: मैंने पाया कि फ़ायरफ़ॉक्स फ़ॉन्ट विस्मयकारी पैकेज की वेबसाइट (ऊपर लिंक) में फ़ॉन्ट-आधारित आइकन को सही ढंग से प्रदर्शित करता है। सीएसएस के निरीक्षण और खान अकादमी के सीएसएस के साथ तुलना करने पर, मुझे पता चलता है कि दोनों कोड बिल्कुल समान हैं सिवाय इसके कि केएएस के सीएसएस के लिए अंतिम विशेषता के बाद कोई अर्धविराम नहीं है (यदि आप इस तथ्य को अनदेखा करते हैं कि यह संकुचित है)। क्या अर्धविराम की कमी इस समस्या का कारण है?

Comments

ऐसा लगता है कि किसी ने इस प्रश्न को बंद करने के लिए मतदान किया है। मुझे जानना है क्यों। मेरा मानना ​​है कि यह सवाल सुपर यूजर (कंप्यूटर मुसीबतों में मदद के लिए एक वेबसाइट) के लिए बहुत प्रासंगिक है और इसे बंद नहीं किया जाना चाहिए।

— ADTC

मैं @ADTC को बंद करने के लिए मतदान कर रहा हूं, क्योंकि यह खनक अकादमी के साथ अधिक एक मुद्दा है जो अपनी साइट की अनुकूलता का अनुसंधान ठीक से नहीं कर रहा है और न ही ऐसा कोई प्रश्न जो यहां हल किया जा सकता है।

— जेम्स मेर्टज़

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

— ADTC

मैं यहाँ समझ की कमी के साथ संयुक्त अहंकार से निराश हूँ। समस्या वास्तव में यह है कि किसी भी समय फ़ॉन्ट विस्फ़ोटक में विफल हो जाएगा फॉन्ट फ़ाइल के लिए अनुरोध क्रॉस-डोमेन है। किसी भी साइट पर दूसरे शब्दों में जो स्थिर फ़ाइलों को वितरित करने के लिए सीडीएन का उपयोग करता है।

— जसोन्तर

"केए गलत स्थान से फ़ॉन्ट फ़ाइलों को संदर्भित कर रहे थे" गलत! फोंट ने तीन अन्य ब्राउज़रों में सही ढंग से काम किया, जैसा कि मैंने पहले ही प्रश्न में उल्लेख किया था, जिसका अर्थ है कि फोंट सही स्थान पर थे। यह स्पष्ट रूप से ./पथ के साथ फ़ायरफ़ॉक्स की समस्या थी जैसा कि मैंने समझाया, जिसने केए को फ़ॉन्ट फ़ाइलों को एक नए स्थान पर स्थानांतरित करने के लिए मजबूर किया, जिसकी आवश्यकता नहीं है ./, फ़ायरफ़ॉक्स को फ़ॉन्ट फ़ाइलों को भी सही ढंग से पढ़ने की अनुमति देता है। इसलिए यह है की कैसे फ़ायरफ़ॉक्स फ़ाइलों को संभालती है एक मुद्दा। तुम गलत हो।

— ADTC

Answer 1

समस्या प्रश्न में वर्णित से सभी रास्ते बदलकर खान अकादमी से तय हुई थी ./करने के लिए /fonts/(उदाहरण के लिए ./fontawesome-webfont.ttfपरिवर्तन करने के लिए /fonts/fontawesome-webfont.ttf)। यह मुझे लगता है कि फ़ायरफ़ॉक्स विशेष "डॉट" निर्देशिका (जो बस वर्तमान निर्देशिका को संदर्भित करता है) से फ़ाइलों को पढ़ने में असमर्थ है।

पुनश्च: पिछले विशेषता के बाद CSS में अर्धविराम की कमी इस समस्या का कारण नहीं है।

अतिरिक्त टिप्पणियां:

.उपसर्ग के बारे में आपका संपादन एक सर्वर समस्या है, न कि कैसे फ़ायरफ़ॉक्स फ़ाइलों को संभालता है। केए गलत स्थान से फ़ॉन्ट फ़ाइलों को संदर्भित कर रहे थे - यादृच्छिक

गलत! फोंट ने तीन अन्य ब्राउज़रों में सही ढंग से काम किया, जैसा कि मैंने पहले ही प्रश्न में उल्लेख किया था, जिसका अर्थ है कि फोंट सही स्थान पर थे। यह स्पष्ट रूप से फ़ायरफ़ॉक्स की समस्या के साथ ./पथ था जैसा कि मैंने समझाया, जिसने केए को फ़ॉन्ट फ़ाइलों को एक नए स्थान पर स्थानांतरित करने के लिए मजबूर किया, जिसकी आवश्यकता नहीं है ./, फ़ायरफ़ॉक्स को फ़ॉन्ट फ़ाइलों को भी सही ढंग से पढ़ने की अनुमति देता है। इसलिए यह है की कैसे फ़ायरफ़ॉक्स फ़ाइलों को संभालती है एक मुद्दा।

Comments

यह उत्तर प्रश्न के नीचे टिप्पणी धारा में सत्या के अनुरोध के अनुसार बनाया गया था ।

— ADTC

ध्यान दें कि फ़ायरफ़ॉक्स की यह समस्या शुरू होने वाले रास्तों को भी प्रभावित करती है ../।

— बेन

Answer 2

संभवतः सामने वाले प्रश्न का उत्तर नहीं है , लेकिन उन लोगों की मदद करने के लिए पर्याप्त है जो थोड़ी अलग समस्या के साथ यहां समाप्त होते हैं जो स्क्रीनशॉट में दिखाए गए परिणाम के समान है।

फ़ायरफ़ॉक्स एक अलग (उप) डोमेन पर होने वाले फ़ॉन्ट के उपयोग को रोक रहा है

उस पोस्ट पर टिप्पणियों को भी पढ़ें, वे अच्छी सलाह देते हैं।

Answer 3

मैंने IE, फ़ायरफ़ॉक्स और क्रोम को सही ढंग से चलाने के लिए पथ परिवर्तन किया, निम्नानुसार है: ( देखने के लिए URL )

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