लोड होते समय वेब फ़ॉन्ट का व्यवहार तय करना, परफ़ॉर्मेंस को ट्यून करने की एक अहम तकनीक हो सकती है. @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 किसी फ़ॉन्ट के डाउनलोड होने की अवधि को तीन मुख्य अवधियों में
सेगमेंट करते हैं.
- पहली पीरियड फ़ॉन्ट ब्लॉक अवधि होती है. इस दौरान, अगर फ़ॉन्ट फ़ेस लोड नहीं होता है, तो इसे इस्तेमाल करने की कोशिश करने वाले किसी भी एलिमेंट को न दिखने वाले फ़ॉलबैक फ़ॉन्ट फ़ेस के साथ रेंडर करना चाहिए. अगर ब्लॉक करने की अवधि के दौरान फ़ॉन्ट फ़ेस सही से लोड होता है, तो फ़ॉन्ट फ़ेस को सामान्य तरीके से इस्तेमाल किया जाएगा.
- फ़ॉन्ट बदलने की अवधि, फ़ॉन्ट को ब्लॉक करने की अवधि के तुरंत बाद होती है. इस दौरान अगर फ़ॉन्ट फ़ेस लोड नहीं होता है, तो इसे इस्तेमाल करने की कोशिश करने वाले किसी भी एलिमेंट को फ़ॉलबैक फ़ॉन्ट फ़ेस के साथ रेंडर करना होगा. अगर स्वैप अवधि के दौरान फ़ॉन्ट फ़ेस सही से लोड होता है, तो फ़ॉन्ट फ़ेस सामान्य रूप से इस्तेमाल किया जाता है.
- फ़ॉन्ट काम न करने की अवधि, फ़ॉन्ट बदलने की अवधि के तुरंत बाद होती है. अगर इस अवधि के शुरू होने तक फ़ॉन्ट फ़ेस को लोड नहीं किया गया है, तो इसे लोड न हो पाने के तौर पर मार्क किया जाता है और इसकी वजह से सामान्य फ़ॉन्ट फ़ॉलबैक होता है. ऐसा न होने पर, फ़ॉन्ट फ़ेस सामान्य इस्तेमाल किया जाता है.
इन पीरियड को समझने का मतलब है कि 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 फ़ॉन्ट फ़ेस को एक छोटी ब्लॉक अवधि (ज़्यादातर मामलों में 3s का सुझाव दिया जाता है) और एक इनफ़ाइनाइट स्वैप पीरियड देता है. दूसरे शब्दों में, अगर फ़ॉन्ट लोड नहीं होता है, तो ब्राउज़र शुरुआत में "न दिखने वाला" टेक्स्ट बनाता है, लेकिन लोड होते ही फ़ॉन्ट फ़ेस को बदल देता है. ऐसा करने के लिए ब्राउज़र, चुने गए फ़ॉन्ट से मिलते-जुलते मेट्रिक वाला एक अनाम फ़ॉन्ट फ़ेस बनाता है, लेकिन सभी ग्लिफ़ में "इंक" नहीं होता है. इस वैल्यू का इस्तेमाल सिर्फ़ तब करना चाहिए, जब पेज को इस्तेमाल करने के लिए, किसी खास टाइपफ़ेस में टेक्स्ट को रेंडर करना ज़रूरी हो.
स्वैप करें
बदलने से फ़ॉन्ट फ़ेस को शून्य सेकंड ब्लॉक पीरियड और इनफ़ाइनाइट स्वैप पीरियड मिलता है. इसका मतलब है कि अगर फ़ॉन्ट फ़ेस लोड नहीं है, तो ब्राउज़र तुरंत फ़ॉलबैक के साथ टेक्स्ट ड्रॉ करता है, लेकिन फ़ॉन्ट फ़ेस लोड होते ही उसे बदल देता है. ब्लॉक करें की तरह ही, यह वैल्यू सिर्फ़ तब इस्तेमाल की जानी चाहिए, जब टेक्स्ट को किसी खास फ़ॉन्ट में रेंडर करना पेज के लिए ज़रूरी हो. हालांकि, किसी भी फ़ॉन्ट में रेंडर करने पर भी सही मैसेज दिखेगा. लोगो टेक्स्ट बदल के लिए अच्छा विकल्प है, क्योंकि उचित फ़ॉलबैक का इस्तेमाल करके किसी कंपनी का नाम दिखाने से मैसेज दिखाई देगा, लेकिन आखिर में आपको आधिकारिक टाइपफ़ेस का इस्तेमाल करना होगा.
fallback
फ़ॉलबैक, फ़ॉन्ट फ़ेस को बहुत ही कम ब्लॉक पीरियड (ज़्यादातर मामलों में 100 मि॰से॰ या उससे कम का सुझाव दिया जाता है) और स्वैप करते समय एक छोटी अवधि (ज़्यादातर मामलों में तीन सेकंड का सुझाव दिया जाता है) देता है. दूसरे शब्दों में, अगर फ़ॉन्ट फ़ेस लोड नहीं होता है, तो शुरुआत में इसे फ़ॉलबैक के साथ रेंडर किया जाता है. हालांकि, फ़ॉन्ट के लोड होते ही इसे बदल दिया जाता है. हालांकि, अगर बहुत ज़्यादा समय बीत जाता है, तो बाकी पेज के लिए फ़ॉलबैक का इस्तेमाल किया जाएगा. फ़ॉलबैक, मुख्य भाग के टेक्स्ट जैसी चीज़ों के लिए एक अच्छा विकल्प है, जहां आप चाहते हैं कि उपयोगकर्ता जल्द से जल्द पढ़ना शुरू कर दे और नया फ़ॉन्ट लोड होते ही टेक्स्ट को इधर-उधर शिफ़्ट करके उनके अनुभव में परेशानी न करे.
ज़रूरी नहीं
वैकल्पिक फ़ॉन्ट फ़ेस को बहुत ही कम ब्लॉक पीरियड (ज़्यादातर मामलों में 100 मि॰से॰ या उससे कम का सुझाव दिया जाता है) और एक शून्य सेकंड का पीरियड देता है. फ़ॉलबैक की तरह ही, यह उस समय के लिए अच्छा विकल्प है, जब डाउनलोड करने के लिए फ़ॉन्ट "अच्छा", लेकिन अनुभव के लिए ज़रूरी न हो. वैकल्पिक वैल्यू की मदद से, ब्राउज़र पर यह तय किया जाता है कि फ़ॉन्ट डाउनलोड शुरू करना है या नहीं. फ़ॉन्ट डाउनलोड करने की सुविधा चालू या बंद की जा सकती है. इसके अलावा, उपयोगकर्ता के हिसाब से, वैल्यू को कम प्राथमिकता के तौर पर सेट किया जा सकता है. यह उन स्थितियों में फ़ायदेमंद हो सकता है जब उपयोगकर्ता के इंटरनेट कनेक्शन खराब हो और किसी फ़ॉन्ट को हटाना, संसाधनों का सही इस्तेमाल न हो.
ब्राउज़र समर्थन
फ़िलहाल, font-display डेस्कटॉप Chrome 49 में, एक्सपेरिमेंटल वेब प्लैटफ़ॉर्म फ़ीचर फ़्लैग के पीछे है. यह Android के लिए, Opera और Opera में शिपिंग करता है.
डेमो
font-display को कोशिश करने के लिए,
सैंपल देखें. परफ़ॉर्मेंस में महारत रखने वाले डेवलपर के लिए, यह टूलबेल्ट
में एक ज़्यादा उपयोगी टूल हो सकता है!