जूँ को खत्म करने का दूसरा तरीका

कार्य

LICE - वह प्रभाव जो तब होता है जब टेक्स्ट को प्लग-इन फ़ॉन्ट के साथ स्टाइल किया जाता है जो उपयोगकर्ता के कंप्यूटर पर स्थापित नहीं होता है। यह तब दिखाई देता है जब जुड़ा हुआ फ़ॉन्ट अभी तक डाउनलोड नहीं किया गया है , और इस तत्व के font-family संपत्ति के मूल्य से निम्नलिखित फ़ॉन्ट में शैलीगत पाठ प्रदर्शित किया गया है। फोंट के इस तरह के स्विचिंग एक तत्व के आकार को भी प्रभावित कर सकते हैं यदि वे इसमें पाठ के आकार पर निर्भर करते हैं।
प्रभाव को FOUT के रूप में भी जाना जाता है - जैसा कि पॉल आयरिश ने कहा था।

सामान्य बिंदुओं के साथ, सुविधाएँ भी हैं। उदाहरण के लिए, फ़ायरफ़ॉक्स में, गैर-मानक फ़ॉन्ट में खींचे जाने वाले पाठ को 3 सेकंड के लिए प्रदर्शित नहीं किया जाता है , क्रोम में भी इसी तरह की देरी होती है । यदि इस समय के दौरान फ़ॉन्ट को डाउनलोड करने का समय है, तो पाठ को वांछित फ़ॉन्ट में तुरंत प्रदर्शित किया जाएगा।

इस विषय पर ऐसा एक लेख था। यह अनुशंसा की गई कि VOSH के प्रभाव को फोंट के साथ एक सक्षम खेल द्वारा समतल किया जाए। दुर्भाग्य से, कभी-कभी फोंट जो मानक लोगों से विशेषताओं में बहुत भिन्न होते हैं, जुड़े हुए हैं।

निर्णय

LOSS को खत्म करने के लिए, मैंने data:uri का उपयोग करके मुख्य स्टाइलशीट में फ़ॉन्ट निर्दिष्ट करने का निर्णय लिया data:uri ताकि पेज के साथ ही फॉन्ट तुरंत प्रदर्शित हो जाए।

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

eot में फ़ॉन्ट्स सबसे हल्का हैं, लेकिन केवल IE समर्थित हैं।
ttf और svg में फ़ॉन्ट भारी होते हैं, कभी-कभी - निश्चित रूप से, यह फ़ॉन्ट पर निर्भर करता है - eot और woff जितना eot स्थान। मेरी स्थिति में, मैंने woff चुना, यह प्रारूप हमारे आगंतुकों के अधिकांश ब्राउज़रों द्वारा समर्थित है।
अभी भी ऐसे ब्राउज़र हैं जो woff को समझ में नहीं आते हैं, इसलिए उनके लिए विकल्प इंगित किए जाते हैं।

IE 8 संस्करण और पुराने woff में फोंट नहीं समझते हैं, उन्हें बहुत कुछ चाहिए। उसी समय, IE8 data:uri में फ़ाइलों को नहीं समझता है data:uri 32K की तुलना data:uri भारी है , और पुराने संस्करण बिल्कुल भी अनुभव नहीं करते हैं, इसलिए, उनके लिए एक अलग शैली की फ़ाइल में, आप बस फ़ॉन्ट फ़ाइलों के लिंक निर्दिष्ट कर सकते हैं। इन ब्राउज़रों को अनावश्यक लोड करने से रोकने के लिए, woff और अन्य प्रारूपों में फ़ॉन्ट कनेक्शन को एक अलग स्टाइलशीट में हाइलाइट किया गया है और एक सशर्त टिप्पणी द्वारा अलग किया गया है।

इसके अलावा, एक राय है कि क्रोम के तहत विन में क्रोम svg फोंट दूसरों की तुलना में बेहतर दिखते हैं , लेकिन, यह मुझे लगता है, यह स्वाद का मामला है। इस प्रारूप में एक फ़ॉन्ट gzip का उपयोग करने वाले अन्य लोगों की तुलना में बेहतर है , लेकिन फ़ायरफ़ॉक्स और IE द्वारा समर्थित नहीं है।

इस प्रकार, आप निम्नलिखित कोड का उपयोग करके फोंट लोड कर सकते हैं:

 <!--    --> <!--[if lte IE 8]> <link rel="stylesheet" href="fonts_ie.css" media="all"> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="fonts.css" media="all"> <!--<![endif]--> <link rel="stylesheet" href="main.css" media="all"> 

 /* fonts_ie.css */ @font-face { font-family: 'PT Sans Narrow'; font-style: italic; font-weight: bold; src: url('PTS76F_W.eot'); } 

 /* fonts.css */ @font-face { font-family: 'PT Sans Narrow'; font-style: italic; font-weight: bold; font-variant: normal; src: url('data:application/x-font-woff;base64,d09GRgABAAAA...aCw0AAA==') format('woff'), url('PTN77F_W.svg#PTSans-NarrowBold') format('svg'), url('PTN77F_W.ttf') format('truetype'); } 

 /* main.css */ body { font-family: 'PT Sans Narrow', 'Arial Narrow', sans-serif; font-style: italic; } 

इस पद्धति का उपयोग करते समय, VOSH केवल असमर्थित woff फॉन्ट में रहता है, जो उपयोगकर्ताओं के लिए व्यवस्थित रूप से ब्राउज़र खो रहा है, जो इस समय सबसे आम है IE8।

इस पृष्ठ पर, फ़ॉन्ट पारंपरिक रूप से जुड़ा हुआ है।
फ़ॉन्ट यहाँ एन्कोड किया गया है।
प्रभाव धीमे कनेक्शन पर अधिक ध्यान देने योग्य है।

विशेषताएं

यह महसूस करना सार्थक है कि इस तकनीक का उपयोग करते समय, ऐसे ब्राउज़र बने रहते हैं जो कि woff में फोंट को नहीं समझते हैं , लेकिन उन्हें डाउनलोड करना होगा। यहां ऐसे ब्राउज़र वाले विज़िटर की संख्या और उनकी यात्राओं की उत्पादकता पहले से ही एक भूमिका निभाती है। मेरी स्थिति में, यह पता चला कि एलआईसीई को खत्म करना बेहतर है।

फ़ॉन्ट अभी भी डाउनलोड किया जाएगा , भले ही स्थानीय रूप से इंस्टॉल किया गया हो । यह शैलियों के बीच संघर्ष को रोकने के लिए है; यह आवश्यकतानुसार डाउनलोड करेगा।
पृष्ठ तब तक नहीं खींचा जाएगा जब तक कि फ़ॉन्ट फ़ाइल को फ़ॉन्ट के साथ डाउनलोड न किया जाए।

मैं यह भी ध्यान देता हूं कि विधि एक लाइसेंस के साथ फोंट के लिए उपयुक्त नहीं है जो data:uri का उपयोग करके उन्हें डाउनलोड करने की अनुमति नहीं देता है data:uri ।

और, ज़ाहिर है, लोड किए गए फोंट के साथ सभी समस्याओं का गारंटीकृत समाधान उन्हें उपयोग करने से इनकार करना है। गंभीरता से, कभी-कभी वे बेकार हैं।

अतिरिक्त जानकारी

प्लगइन फोंट के बारे में जानने के लिए एक शानदार शुरुआती बिंदु ।
यदि आपको हमेशा की तरह फ़ॉन्ट कनेक्ट करना है। यहाँ एक टिप्पणी है जो मैंने इस पद्धति को लागू करने के बाद देखी।

कनेक्शन की विशेषताओं के बारे में थोड़ा।