फ़ॉन्ट-डिसप्ले की मदद से फ़ॉन्ट की परफ़ॉर्मेंस को कंट्रोल करना

Rob Dodson

वेब फ़ॉन्ट के लोड होते समय यह तय करना, परफ़ॉर्मेंस को बेहतर बनाने की एक अहम तकनीक हो सकती है. @font-face के लिए नए फ़ॉन्ट-डिसप्ले डिस्क्रिप्टर की मदद से, डेवलपर यह तय कर सकते हैं कि उनके वेब फ़ॉन्ट कैसे रेंडर होंगे या फ़ॉलबैक कैसे होंगे. यह इस बात पर निर्भर करता है कि उन्हें लोड होने में कितना समय लगेगा.

आज के समय में फ़ॉन्ट रेंडरिंग में अंतर

वेब फ़ॉन्ट की मदद से डेवलपर, अपने प्रोजेक्ट में अच्छी टाइपोग्राफ़ी को शामिल कर सकते हैं. साथ ही, इसका फ़ायदा यह है कि अगर उपयोगकर्ता के पास पहले से कोई टाइपफ़ेस नहीं है, तो ब्राउज़र को उसे डाउनलोड करने में कुछ समय लगेगा. नेटवर्क में गड़बड़ियाँ हो सकती हैं. इसलिए, डाउनलोड करने के इस समय से उपयोगकर्ता के अनुभव पर बुरा असर पड़ सकता है. ऐसा नहीं है कि अगर आपके टेक्स्ट को दिखाने में बहुत ज़्यादा समय लगता है, तो कोई भी इस बात की परवाह नहीं करेगा कि आपका टेक्स्ट कितना सुंदर है!

फ़ॉन्ट के धीमे डाउनलोड होने के जोखिम को कम करने के लिए, ज़्यादातर ब्राउज़र टाइम आउट लागू कर देते हैं. इसके बाद, फ़ॉलबैक फ़ॉन्ट का इस्तेमाल किया जाता है. यह एक उपयोगी तकनीक है, लेकिन हमारी अच्छी बात यह है कि असल में लागू करने के लिए ब्राउज़र अलग-अलग होते हैं.

ब्राउज़र	टाइम आउट की संख्या	Fallback	स्वैप करें
Chrome 35 और उसके बाद के वर्शन	3 सेकंड	हां	हां
Opera	3 सेकंड	हां	हां
Firefox	3 सेकंड	हां	हां
Internet Explorer	0 सेकंड	हां	हां
Safari	कोई टाइम आउट नहीं	लागू नहीं	लागू नहीं

• Chrome और Firefox में तीन सेकंड का टाइम आउट होता है. इसके बाद, टेक्स्ट को फ़ॉलबैक फ़ॉन्ट के साथ दिखाया जाता है. अगर फ़ॉन्ट डाउनलोड हो जाता है, तो समय के साथ अदला-बदली होती है और टेक्स्ट को तय किए गए फ़ॉन्ट के साथ फिर से रेंडर किया जाता है.
• Internet Explorer में शून्य सेकंड का टाइम आउट होता है जिसकी वजह से तुरंत टेक्स्ट रेंडर होना शुरू हो जाता है. अगर अनुरोध किया गया फ़ॉन्ट अब तक उपलब्ध नहीं है, तो फ़ॉलबैक का इस्तेमाल किया जाता है. अनुरोध किया गया फ़ॉन्ट उपलब्ध होने पर, टेक्स्ट को फिर से रेंडर किया जाता है.
• Safari में टाइम आउट की कोई कार्रवाई नहीं होती (या कम से कम बेसलाइन नेटवर्क टाइम आउट के अलावा कुछ और नहीं होता है).

इन नियमों से उनके ऐप्लिकेशन पर क्या असर पड़ेगा, यह तय करने का अधिकार डेवलपर के पास ही होता है. इससे स्थिति और भी खराब हो जाती है. ऐसा हो सकता है कि परफ़ॉर्मेंस में दिलचस्पी रखने वाला डेवलपर, तेज़ी से शुरुआती अनुभव पाना चाहे, जो फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करता हो. साथ ही, वह वेब फ़ॉन्ट सिर्फ़ तब काम करता हो, जब उसे डाउनलोड करने का मौका मिला हो. फ़ॉन्ट लोडिंग एपीआई जैसे टूल का इस्तेमाल करके, ब्राउज़र की कुछ डिफ़ॉल्ट गतिविधियों को बदला जा सकता है और बेहतर परफ़ॉर्मेंस हासिल की जा सकती है. हालांकि, इसके लिए JavaScript की सामान्य मात्रा को लिखने की ज़रूरत पड़ सकती है, जिसे पेज पर इनलाइन किया जाना चाहिए या किसी बाहरी फ़ाइल से अनुरोध करना पड़ सकता है. इस वजह से, एचटीटीपी इंतज़ार का समय बढ़ सकता है.

इस समस्या को हल करने के लिए, सीएसएस वर्किंग ग्रुप ने एक नया @font-face डिस्क्रिप्टर, font-display, और एक संबंधित प्रॉपर्टी पेश की है. इससे, यह कंट्रोल किया जा सकेगा कि डाउनलोड किए जा सकने वाले फ़ॉन्ट को पूरी तरह लोड होने से पहले कैसे रेंडर किया जाएगा.

फ़ॉन्ट डाउनलोड होने की टाइमलाइन

कुछ ब्राउज़र आज-कल लागू होने वाले फ़ॉन्ट टाइम आउट के मौजूदा व्यवहार की तरह ही, font-display फ़ॉन्ट के डाउनलोड होने की अवधि को तीन मुख्य अवधि में बांट देता है.

1. पहला पीरियड, फ़ॉन्ट ब्लॉक करने की अवधि है. इस दौरान, अगर फ़ॉन्ट फ़ेस लोड नहीं किया गया है, तो इस्तेमाल करने की कोशिश करने वाले एलिमेंट को ऐसे फ़ॉलबैक फ़ॉन्ट फ़ेस के साथ रेंडर करना होगा. अगर ब्लॉक अवधि के दौरान फ़ॉन्ट फ़ेस सही तरीके से लोड होता है, तो फ़ॉन्ट फ़ेस का इस्तेमाल सामान्य रूप से किया जाता है.
2. फ़ॉन्ट बदलने की अवधि, फ़ॉन्ट ब्लॉक की अवधि के तुरंत बाद शुरू होती है. इस दौरान, अगर फ़ॉन्ट फ़ेस लोड नहीं किया गया है, तो कोई भी एलिमेंट इसके इस्तेमाल की कोशिश करेगा. इसके बजाय, उसे फ़ॉलबैक फ़ॉन्ट फ़ेस के साथ रेंडर करना होगा. अगर फ़ॉन्ट फ़ेस को बदलने की अवधि के दौरान पेज सही से लोड होता है, तो फ़ॉन्ट फ़ेस का इस्तेमाल सामान्य रूप से किया जाता है.
3. फ़ॉन्ट खराब होने की अवधि, फ़ॉन्ट बदलने की अवधि के तुरंत बाद होती है. अगर यह अवधि शुरू होने के बाद भी फ़ॉन्ट फ़ेस लोड नहीं होता है, तो इसे 'लोड नहीं हो सका' के तौर पर मार्क किया जाता है. इसकी वजह से, फ़ॉन्ट का फिर से इस्तेमाल किया जा सकता है. अगर ऐसा नहीं है, तो फ़ॉन्ट फ़ेस का इस्तेमाल सामान्य रूप से किया जाता है.

इन समयावधि को समझने का मतलब है कि font-display का इस्तेमाल करके यह तय किया जा सकता है कि आपके फ़ॉन्ट को किस तरह रेंडर करना है. यह इस बात पर निर्भर करता है कि आपने उसे कब डाउनलोड किया था या कब डाउनलोड किया था.

आपके लिए कौन सा फ़ॉन्ट-डिसप्ले सही है?

font-display डिस्क्रिप्टर के साथ काम करने के लिए, इसे अपने @font-face के नियम जोड़ें:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

फ़िलहाल, font-display वैल्यू की नीचे दी गई रेंज auto | block | swap | fallback | optional के साथ काम करता है.

अपने-आप

auto, उपयोगकर्ता-एजेंट के ज़रिए इस्तेमाल की जाने वाली फ़ॉन्ट डिसप्ले रणनीति का इस्तेमाल करता है. फ़िलहाल, ज़्यादातर ब्राउज़र में ब्लॉक करें जैसी डिफ़ॉल्ट रणनीति होती है.

ब्लॉक करें

block फ़ॉन्ट फ़ेस को एक छोटी ब्लॉक अवधि (ज़्यादातर मामलों में 3 सेकंड का सुझाव दिया जाता है) और असीमित स्वैप अवधि देता है. दूसरे शब्दों में कहें, तो अगर फ़ॉन्ट लोड नहीं किया गया है, तो ब्राउज़र शुरुआत में "नहीं दिखने वाला" टेक्स्ट दिखाता है. हालांकि, लोड होते ही फ़ॉन्ट फ़ेस को स्वैप कर दिया जाता है. ऐसा करने के लिए ब्राउज़र, चुने गए फ़ॉन्ट से मिलती-जुलती मेट्रिक के साथ, बिना पहचान वाला फ़ॉन्ट फ़ेस बनाता है. हालांकि, इसमें सभी ग्लिफ़ होते हैं जिनमें "इंक" नहीं होता. इस वैल्यू का इस्तेमाल सिर्फ़ तब करना चाहिए, जब पेज को इस्तेमाल करने लायक बनाने के लिए, टेक्स्ट को किसी खास टाइपफ़ेस में रेंडर करना ज़रूरी हो.

स्वैप करें

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

fallback

फ़ॉलबैक से, फ़ॉन्ट फ़ेस के लिए बहुत कम ब्लॉक पीरियड (ज़्यादातर मामलों में 100 मि॰से॰ या उससे कम) और स्वैप करने की थोड़ी देर (ज़्यादातर मामलों में तीन सेकंड का सुझाव दिया जाता है) देता है. दूसरे शब्दों में, अगर फ़ॉन्ट फ़ेस को लोड नहीं किया जाता है, तो पहले इसे फ़ॉलबैक के साथ रेंडर किया जाता है, लेकिन लोड होते ही फ़ॉन्ट को बदल दिया जाता है. हालांकि, अगर बहुत ज़्यादा समय लगता है, तो फ़ॉलबैक पेज के पूरे जीवनकाल के लिए इस्तेमाल किया जाता है. फ़ॉलबैक, लेख की बॉडी टेक्स्ट जैसी चीज़ों के लिए अच्छा विकल्प है. ऐसे टेक्स्ट के लिए, उपयोगकर्ता को जल्द से जल्द पढ़ना शुरू करना चाहिए और नया फ़ॉन्ट लोड होने पर टेक्स्ट को इधर-उधर शिफ़्ट करके उसे परेशान नहीं करना चाहिए.

ज़रूरी नहीं

ज़रूरी नहीं है. यह फ़ॉन्ट फ़ेस के लिए बहुत कम ब्लॉक पीरियड (ज़्यादातर मामलों में 100 मि॰से॰ या उससे कम का सुझाव दिया जाता है) और शून्य सेकंड स्वैप करने की अवधि देता है. फ़ॉलबैक की तरह, डाउनलोड होने वाला फ़ॉन्ट तब अच्छा होता है, जब डाउनलोड करने वाला फ़ॉन्ट “अच्छा” हो, लेकिन अनुभव के लिहाज़ से ज़रूरी न हो. वैकल्पिक वैल्यू ब्राउज़र के ऊपर छोड़ देती है और यह तय करती है कि फ़ॉन्ट डाउनलोड करना है या नहीं. इससे, हो सकता है कि वह ऐसा न करे या कम प्राथमिकता के तौर पर इसे लागू करे. यह इस बात पर निर्भर करता है कि उपयोगकर्ता के लिए वह सबसे अच्छा विकल्प है या नहीं. यह उन स्थितियों में फ़ायदेमंद हो सकता है, जब उपयोगकर्ता का कनेक्शन कमज़ोर हो और फ़ॉन्ट को नीचे खींचकर संसाधनों का सही इस्तेमाल न किया जा रहा हो.

ब्राउज़र समर्थन

फ़िलहाल, font-display डेस्कटॉप Chrome 49 में प्रयोग के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म सुविधाएं फ़्लैग के पीछे है. साथ ही, Android के लिए Opera और Opera में शिपिंग किया जा रहा है.

डेमो

font-display को आज़माने के लिए सैंपल देखें. परफ़ॉर्मेंस के बारे में सोच रखने वाले डेवलपर के लिए, यह टूलबेल्ट का एक और काम का टूल हो सकता है!