2013-01-24 38 views
5
में

मैं अपने पन्ने पर एक वेब फ़ॉन्ट के रूप में FontAwesome (http://fortawesome.github.com/Font-Awesome/) का उपयोग कर रहा FontAwesome फ़ॉन्ट एम्बेडिंग:CSS3111 त्रुटि IE8

http://www.jungledragon.org/apps/jd3/

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

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

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

यह लोड हो रहा है फोंट एक्स ब्राउज़र के लिए वास्तविक मानक, और एक ही आउटपुट के रूप में FontSquirrel जैसे उपकरणों के द्वारा उत्पन्न की है। प्रकार निर्देशिका मेरी सीएसएस निर्देशिका से संबंधित है, और यह फ़ॉन्ट IE8 को छोड़कर सभी ब्राउज़रों में लोड होगा।

दूसरा, मेरे पास क्रॉस डोमेन उत्पत्ति सक्षम (सीओआरएस) है, इसलिए यह निश्चित रूप से मुद्दा नहीं है।

कुछ लोग सुझाव देते हैं कि एचटीएमएल 5 शिव लोड करने से आईई 8 फ़ॉन्ट को लोड करने में हस्तक्षेप हो सकता है, लेकिन शिव लोडिंग को पूरी तरह से हटाकर अभी भी कोई फर्क नहीं पड़ता है।

साइट अपाचे 2 पर चल रही है, जिससे माइम प्रकार परिणाम में कोई फर्क नहीं पड़ता है। साथ ही, मैं पुष्टि कर सकता हूं कि मैं सीधे पथ का उपयोग कर IE8 से ईओटी फ़ाइल डाउनलोड कर सकता हूं, इसलिए फ़ाइल निश्चित रूप से पहुंच योग्य है।

मुझे नहीं पता कि मैं क्या गलत कर रहा हूं, लेकिन यह मेरे अंत में कुछ होना चाहिए। कारण सरल है: आईई 8 से आधिकारिक FontAwesome वेबसाइट खोलने से फ़ॉन्ट ठीक हो जाएगा। इसके अलावा, मैं जिस माध्यमिक फ़ॉन्ट का उपयोग कर रहा हूं (साइट के लोगो में उपयोग किया जाता है) भी ठीक है। वह दूसरा फ़ॉन्ट Google वेबफोंट से आता है, जबकि Fontawesome फ़ॉन्ट साइट के समान डोमेन पर होस्ट किया जाता है।

मैं इसे हल करने के तरीकों से बाहर निकल रहा हूं, कोई सुराग?

अद्यतन: मैं IE डेवलपर उपकरण पट्टी में है कि जोड़ना चाहिए, इस त्रुटि मैं हो रही है:

CSS3111: @ फॉन्ट-फेस अज्ञात त्रुटि मिली। fontawesome-webfont.eot

मैं इस लेख त्रुटि चर्चा कर पाया:

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

... अभी तक मैं एक समाधान नहीं दिख रहा है कि अंदर मुझे मदद मिलती है।

उत्तर

7

अंत में, इस उत्तर से मेरी समस्या का हल:

https://stackoverflow.com/a/12459447/80969

मैं ttf फ़ाइल है कि एक अस्पष्ट फ़ॉन्ट संपादन प्रोग्राम का उपयोग कर fontawesome डाउनलोड पैक के साथ आया था संपादित करने के लिए किया था। वहां मैंने "मानव फ़ॉन्ट नाम" का नाम बदलकर अन्य सभी "नाम" फ़ील्ड के समान किया। इसके बाद, मैंने http://www.font2web.com/ का उपयोग एक नई .eot फ़ाइल जेनरेट करने के लिए किया और इसे प्रोजेक्ट में एकीकृत किया, बाकी सब कुछ वही रखा। और प्रतिष्ठा, यह काम करता है!

ऐसा लगता है कि फ़ॉन्ट-भयानक के मेरे संस्करण को डाउनलोड में सही बनाया गया था।

+1

"अस्पष्ट फ़ॉन्ट संपादन प्रोग्राम" शायद http://sourceforge.net/projects/fontforge/files/latest/download है कि कोई भी अच्छा है और यह समाधान मेरे लिए भी काम करता है –

+0

मेरा (FontAweomse) फ़ॉन्ट नहीं था आईई 8 में और आईई 9 में काम कर रहा था यह काम कर रहा था, फिर भी उपर्युक्त त्रुटि उत्पन्न कर रहा था। यह (.eot को फिर से बनाना) दोनों समस्याओं को हल किया। लिंक के लिए धन्यवाद! – Chris

+0

मैं भी इसी समस्या में भाग गया, मैंने निश्चित ईओटी फ़ाइल संकलित की और इसे यहां साझा किया: https://gist.github.com/vjt/7436066। मुझे उम्मीद है कि यह किसी को बहुत बुरा समय बचाता है जिसे मैंने विंडोज़ पर फॉन्टफोर्ज के साथ लड़ने में बिताया था। – vjt