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

Rob Dodson

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

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

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

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

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

स्थिति को और भी खराब बनाने के लिए, डेवलपर के पास यह तय करने का पूरा कंट्रोल नहीं होता कि वे नियम उनके लागू होने पर असर डालेंगे. बेहतरीन परफ़ॉर्मेंस वाला डेवलपर इसे पसंद कर सकता है तेज़ी से शुरुआती अनुभव पाने के लिए, जो फ़ॉलबैक फ़ॉन्ट का इस्तेमाल करता है और बेहतर वेब फ़ॉन्ट का इस्तेमाल, डाउनलोड करने का मौका मिलने के बाद दोबारा विज़िट करने पर करना चाहिए. फ़ॉन्ट लोडिंग API जैसे टूल का इस्तेमाल करके, इनमें से कुछ डिफ़ॉल्ट ब्राउज़र व्यवहार और प्रदर्शन लाभ प्राप्त करता है, लेकिन यह 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 फ़ॉन्ट फ़ेस में कम समय के लिए ब्लॉक रहेगा (ज़्यादातर मामलों में तीन सेकंड का इस्तेमाल करने का सुझाव दिया जाता है) और इनफ़ाइनाइट स्वैप पीरियड शामिल है. दूसरे शब्दों में, ब्राउज़र "नहीं दिखाई दे रहा" दिखाता है टेक्स्ट पहली बार, अगर फ़ॉन्ट लोड नहीं किया गया है, लेकिन वह तुरंत ही फ़ॉन्ट फ़ेस को स्वैप कर देता है लोड करता है. ऐसा करने के लिए ब्राउज़र, मेट्रिक के साथ बिना पहचान वाला फ़ॉन्ट फ़ेस बनाता है जो चुने गए फ़ॉन्ट से मिलते-जुलते हैं, लेकिन सभी ग्लिफ़ के साथ जिनमें "इंक" नहीं होता. इस वैल्यू का इस्तेमाल सिर्फ़ तब करना चाहिए, जब टेक्स्ट को किसी खास टाइपफ़ेस में रेंडर किया गया हो पेज को इस्तेमाल करने लायक बनाने के लिए, यह शर्त पूरी होना ज़रूरी है.

स्वैप करें

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

fallback

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

ज़रूरी नहीं

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

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

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

डेमो

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