🌧️ 👜 🎏 वेब फ़ॉन्ट प्रदर्शन 💆🏽 👶🏿 🤾🏾

वेब फोंट का उपयोग तेजी से लोकप्रिय हो रहा है: HTTP संग्रह के अनुसार, पिछले एक साल में अतिरिक्त फोंट का उपयोग करने वाले साइटों की संख्या दोगुनी हो गई है - 6 से 12% तक।

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

अनुकूलन

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

WOFF (वेब ओपन फॉन्ट फॉर्मेट): एक ओपन कॉम्प्रेस्ड ओपन टाइप या ट्रू टाइप फ़ॉन्ट फॉर्मेट जो अतिरिक्त मेटाडेटा को सपोर्ट करता है।
TTF : सभी परिचित, अच्छे पुराने ट्रू टाइप।
ईओटी (एंबेडेड ओपन टाइप): ओपन टाइप फोंट के लिए एक कॉम्पैक्ट प्रारूप।
एसवीजी (स्केलेबल वेक्टर ग्राफिक्स): वेक्टर ग्राफिक्स प्रारूप (मैंने पहले ही इस बारे में लिखा है)।

लेकिन उनमें से कोई भी क्रॉस-ब्राउज़र संगतता प्रदान नहीं करता है (आप caniuse.com पर समर्थन की जांच कर सकते हैं: woff , ttf , eot , svg ), इसलिए एक ही समय में कई प्रारूपों का उपयोग करना उचित है। और यहां हमें एक प्रदर्शन समस्या का सामना करना पड़ रहा है: फ़ॉन्ट फ़ाइल ही काफी बड़े पैमाने पर है, उदाहरण के लिए, एरियल फ़ॉन्ट, जो सभी भाषाओं का समर्थन करता है, का वजन 22 मेगाबाइट है! बेशक, सामान्य पृष्ठों पर, यह एक बार में सेट के सभी पात्रों को जोड़ने के लिए कोई मतलब नहीं है, इसलिए आपको एक उपकरण की आवश्यकता होती है जो आपको फ़ॉन्ट के केवल भाग (उदाहरण के लिए, केवल सिरिलिक) का उपयोग करने की अनुमति देता है।

उदाहरण के लिए, ओपन सेन्स फ़ॉन्ट - सभी भाषाओं सहित सबसे लोकप्रिय Google वेब फ़ॉन्ट्स में से एक का वजन 217 किलोबाइट है, लेकिन यदि आप केवल एक सेट - लैटिन का उपयोग करते हैं तो आकार कम किया जा सकता है। तब आकार घटकर 36 किलोबाइट हो जाएगा:

गूगल फोंट

यहाँ फ़ॉन्ट (लैटिन) के केवल भाग को जोड़ने का तरीका बताया गया है:

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet" />

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

बेहतर संपीड़न एल्गोरिदम फ़ाइल का आकार 15% तक कम कर सकता है, और निकट भविष्य में अपेक्षित WOFF 2.0 प्रारूप आपको 30% बेहतर सेक करने की अनुमति देगा।

केवल वर्णों ("एच", "ई", "एल" और "ओ") को जोड़ने के लिए, आप निम्नलिखित कोड का उपयोग कर सकते हैं:

 <link href="http://fonts.googleapis.com/css?family=Inconsolata&text=Hello" rel="stylesheet" />

के उपयोग

Google वेब फ़ॉन्ट्स से सभी फोंट खुले हैं , जो आपको क्रॉस-साइट कैशिंग का सफलतापूर्वक उपयोग करने की अनुमति देता है। उदाहरण के लिए, aforementioned Open Sans का उपयोग एक लाख से अधिक साइटों पर किया जाता है, जिसका अर्थ है कि प्रदर्शन को बढ़ाने के लिए, आप इस फ़ॉन्ट के साथ पिछली साइटों पर जाकर उपयोगकर्ता के ब्राउज़र में फ़ॉन्ट को कैश कर सकते हैं।

यहां बताया गया है कि यह कैसे काम करता है:

फ़ॉन्ट कैशिंग

Google वेब फ़ॉन्ट्स सेवा में उपयोग की जाने वाली CSS शैलियाँ गतिशील हैं: वे स्वचालित रूप से एक विशिष्ट उपयोगकर्ता और उसके ब्राउज़र के लिए उपयुक्त प्रारूप निर्धारित करते हैं। सीएसएस शैलियों को 24 घंटे के लिए कैश किया जाता है। शैली के अंदर फ़ॉन्ट फ़ाइल के लिए एक लिंक है। फ़ॉन्ट कैश स्वयं पूरे एक वर्ष के लिए संग्रहीत किया जाता है! वेब फोंट की लोकप्रियता को देखते हुए, यह स्पष्ट है कि कैश में पहले से ही ओपन संस की एक प्रति है।

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

 h1 { visibility: hidden; } .wf-active h1 { visibility: visible; }

और जवसर्पित क्रियाओं को संभालता है:

 WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] // Google example }, typekit: { id: 'myKitId' // Typekit example }, loading: function() { // JavaScript to execute when fonts start loading }, active: function() { // JavaScript to execute when fonts become active }, inactive: function() { // JavaScript to execute when fonts become inactive (time out) } };

लोडर प्रलेखन

अंत में, विभिन्न सेवाओं और ब्राउज़रों (एमएस में संख्या) का उपयोग करते समय एक ही फ़ॉन्ट (डाउनलोड संस) की डाउनलोड गति की एक छोटी सारांश तालिका:

निष्कर्ष

आज आप वेब फोंट का उपयोग करने के लाभों के बारे में सुनिश्चित हो सकते हैं, लेकिन यह स्पष्ट है कि उनकी लोकप्रियता केवल बढ़ेगी, आकार में कमी आएगी, और ब्राउज़र बेहतर समर्थन करेंगे।

प्रयुक्त सामग्री:

वेब फ़ॉन्ट प्रदर्शन

अनुकूलन

के उपयोग

निष्कर्ष

More articles: