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

Rob Dodson

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

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

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

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

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

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

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

फ़ॉन्ट डाउनलोड होने में लगने वाला समय

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

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

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

आपके लिए कौनसा font-display सही है?

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

@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 में, 'एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाएं' फ़्लैग के पीछे रखा गया है. साथ ही, इसे Opera और Opera for Android में भी उपलब्ध कराया गया है.

डेमो

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