Internet Explorer 8 के लिए HTML5 और वेब फ़ॉन्ट्स टैग सहायता जोड़ें

इंटरनेट एक्सप्लोरर ने लंबे समय से वेब डेवलपर्स को अपने मानकों और आधुनिक मानकों के साथ विसंगतियों से परेशान किया है।

हालाँकि IE9 में कई बग्स तय किए गए हैं, फिर भी यह IE8 जितना लोकप्रिय नहीं है। मैं IE7 के बारे में बात करने से भी डरता हूं।

पोस्ट का सार यह है कि IE8 को अभी भी आधुनिक वेब प्रौद्योगिकियों का अनुपालन करने के लिए बनाया जा सकता है। हमारे मामले में, ये HTML5 टैग हैं।

एचटीएमएल 5 तत्व

HTML5 में नए तत्वों का एक पूरा सेट है, उदाहरण के लिए, हेडर को अलग करने के लिए साइट हेडर और पाद लेख को अलग करने के लिए हैडर ।

चूंकि IE8 उनके बारे में कुछ नहीं जानता है, इसलिए यह CSS से उनकी शैलियों को नहीं पहचान पाएगा। सौभाग्य से, एक आसान तरीका है - बस पृष्ठ के DOM में लापता तत्वों को जोड़ें:

<!--[if lt IE 9]> <script> document.createElement('header'); document.createElement('nav'); document.createElement('section'); document.createElement('article'); document.createElement('aside'); document.createElement('footer'); </script> <![endif]--> 

एक अन्य समस्या यह है कि एचटीएमएल 5 तत्वों को डिफ़ॉल्ट ब्लॉक के रूप में प्रदर्शित किया जाता है, लेकिन IE8 को यह पता नहीं है। इस समस्या को दूर करने के लिए, आपको बस CSS में जोड़ना होगा:

 header, nav, section, article, aside, footer { display:block; } 

वेब फोंट

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

वेब फोंट का उपयोग करने के लिए, CSS में @ फॉन्ट-फेस नियम जोड़ें:

 @font-face { font-family: 'My Font'; src: url('fonts/Myfont.eot'); } h1 { font-family: 'My Font'; } 

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

IE8 अभी भी हमेशा सब-कंस्ट्रक्शन को हैंडल नहीं करता है और इसके बजाय एक सिस्टम फॉन्ट को प्रदर्शित करता है।

ऐसा होने से रोकने के लिए, आप एक ही बार में कई प्रकार की फ़ॉन्ट फ़ाइलों का उपयोग कर सकते हैं। निम्न प्रकार की फ़ॉन्ट फ़ाइलें ब्राउज़र द्वारा समर्थित हैं:

• एंबेडेड ओपन टाइप (EOT)
• ट्रू टाइप (TTF)
• ओपन टाइप (OTF)
• स्केलेबल वेक्टर ग्राफिक्स (SVG)
• वेब ओपन फ़ॉन्ट प्रारूप (WOFF)

इन सभी में से, WOFF अब मानक बन रहा है। यह कई ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स (3.6 से ऊपर), ओपेरा, सफारी और आईई 9) द्वारा समर्थित है।

बेशक, IE8 WOFF के बारे में कुछ नहीं जानता है और केवल EOT का समर्थन करता है। तो वेब फ़ॉन्ट का उपयोग करने के लिए, जिसे हम IE8 उपयोगकर्ताओं के साथ-साथ अन्य ब्राउज़रों में दिखाना चाहते हैं, हमें WOFF और EOT प्रारूपों में फ़ाइलों की आवश्यकता है।

खैर, सब कुछ क्रम से बाहर है, IE8 में एक त्रुटि है जो एक ही फ़ॉन्ट के कई प्रारूपों के लोड को रोकता है। सौभाग्य से, एक हैक है जो इसे ठीक करता है।

फ़ॉन्ट स्प्रिंग के लोग बचाव के लिए आए (ऊपर लिंक):

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

इस उदाहरण में, फ़ॉन्ट को MyWebFont कहा जाता है और एक साथ कई स्वरूपों में प्रस्तुत किया जाता है (EOT, WOFF, TTF और SVG)।

* एसवीजी का उपयोग केवल उस स्थिति में किया जाता है जब उपयोगकर्ता 4.1 संस्करण तक मोबाइल सफारी (आईफोन / आईपैड) का उपयोग करता है

ठीक है, फ़ॉन्ट के पूर्ण उपयोग के लिए, आपको सभी प्रकारों का वर्णन करने की आवश्यकता है। उदाहरण के लिए, मैं केवल 4 का उपयोग करता हूं:

• 300, सामान्य
• 300, इटैलिक
• 600, सामान्य
• 600, इटैलिक

खैर, या आप उन्हें इस तरह से वर्णन कर सकते हैं ::

 @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-LightItalic-webfont.eot'); src: url('fonts/MyWebFont-LightItalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-LightItalic-webfont.woff') format('woff'), url('fonts/MyWebFont-LightItalic-webfont.ttf') format('truetype'), url('fonts/MyWebFont-LightItalic-webfont.svg#MyWebFontLightItalic') format('svg'); font-weight: 300; font-style: italic; } @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-Bold-webfont.eot'); src: url('fonts/MyWebFont-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-Bold-webfont.woff') format('woff'), url('fonts/MyWebFont-Bold-webfont.ttf') format('truetype'), url('fonts/MyWebFont-Bold-webfont.svg#MyWebFontBold') format('svg'); font-weight: 600; font-style: normal; } @font-face { font-family: 'MyWebFont'; src: url('fonts/MyWebFont-BoldItalic-webfont.eot'); src: url('fonts/MyWebFont-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/MyWebFont-BoldItalic-webfont.woff') format('woff'), url('fonts/MyWebFont-BoldItalic-webfont.ttf') format('truetype'), url('fonts/MyWebFont-BoldItalic-webfont.svg#MyWebFontBoldItalic') format('svg'); font-weight: 600; font-style: italic; } 

और अंत में, उस सेवा को देखें जहां आप सभी वेब फ़ॉन्ट स्वरूपों में एक फ़ॉन्ट उत्पन्न कर सकते हैं।

पुनश्च टिप्पणी से संकेत मिलता है कि समाधान IE के पुराने संस्करणों के लिए भी काम करता है।