फ़ॉन्ट लोडिंग: फ़ॉलबैक टेक्स्ट दिखाएँ या कुछ समय के लिए छिपाएँ

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

फ़ॉन्ट लोड होते समय वास्तव में क्या बदलता है?

अनुरोधित फ़ॉन्ट उपलब्ध न होने पर फ़ॉलबैक फ़ॉन्ट उसी टेक्स्ट को दूसरे टाइपफ़ेस में रेंडर करता है। कुछ समय के लिए छिपा टेक्स्ट फ़ॉन्ट लोडिंग की ब्लॉक अवधि से मेल खाता है: ब्राउज़र एक अदृश्य फ़ॉलबैक फ़ेस का लेआउट बनाता है। लोडिंग की समयरेखा तब शुरू होती है, जब ब्राउज़र डाउनलोड किए जा सकने वाले फ़ेस का इस्तेमाल करने की पहली कोशिश करता है। MDN का font-display संदर्भ इन चरणों की व्याख्या करता है।

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

इसका नियंत्रण @font-face नियम के अंदर मौजूद font-display डिस्क्रिप्टर से होता है। यह किसी सामान्य पैराग्राफ़ सिलेक्टर के बजाय फ़ॉन्ट-फ़ेस की परिभाषा का हिस्सा होता है। यह पेज बनाने से जुड़ा विकल्प है: जिस पेज को आप बनाए रखते हैं, उसके लिए उपलब्ध स्टाइलशीट या फ़ॉन्ट सेटिंग इस्तेमाल करें। MDN बताता है कि font-display कहाँ लागू होता है।

पाठक के काम के लिए कौन-सी font-display वैल्यू उपयुक्त है?

बदलाव करने से पहले दो बातें तय करें: क्या शब्दों को तुरंत किसी दूसरे फ़ॉन्ट में दिखना चाहिए, और क्या बाद में उस फ़ॉन्ट को बदलना स्वीकार्य है। नीचे दी गई तालिका दस्तावेज़ में बताई गई लोडिंग अवधियों को एक सामान्य सार्वजनिक पेज के लिए विकल्पों में बदलती है। MDN की वैल्यू परिभाषाएँ इनके बुनियादी व्यवहार का वर्णन करती हैं।

वैल्यू	फ़ेस उपलब्ध न होने पर	फ़ॉलबैक को बदलने का अवसर	शुरुआत के लिए उपयुक्त
swap	बेहद कम समय तक ब्लॉक, फिर दिखने वाला फ़ॉलबैक	बदलने की असीमित अवधि	छोटी हेडिंग, जिसके लिए मनचाहा टाइपफ़ेस मायने रखता हो
fallback	बेहद कम समय तक ब्लॉक, फिर दिखने वाला फ़ॉलबैक	बदलने की कम अवधि	पढ़ने वाला टेक्स्ट, जहाँ शुरुआती बदलाव स्वीकार्य हो
optional	बेहद कम समय तक ब्लॉक	बदलने की कोई अवधि नहीं	ऐसा टेक्स्ट जहाँ पहला दिखने वाला फ़ॉन्ट बनाए रखना सबसे ज़रूरी हो
block	छोटी ब्लॉक अवधि में अदृश्य फ़ॉलबैक, फिर दिखने वाला फ़ॉलबैक	बदलने की असीमित अवधि	किसी विशेष फ़ॉन्ट पर निर्भर छोटा तत्व
auto	ब्राउज़र द्वारा चुनी गई नीति	ब्राउज़र द्वारा चुनी गई नीति	ब्राउज़र के डिफ़ॉल्ट व्यवहार को स्वीकार करना

ये नीति की श्रेणियाँ हैं, ऐसे सटीक टाइमर नहीं जिन्हें आप कॉन्फ़िगर कर सकें। W3C का मौजूदा CSS Fonts Level 4 कार्यशील ड्राफ़्ट सामान्य अवधि सुझाता है, लेकिन स्पष्ट रूप से ब्राउज़र के अनुसार अंतर की अनुमति देता है। यह block के इस्तेमाल को छोटे टेक्स्ट अंशों तक भी सीमित करता है, जिनकी उपयोगिता के लिए वही विशेष फ़ॉन्ट आवश्यक हो। केवल हेडिंग का रूप पसंद होना उसे खाली छोड़ने का कमज़ोर कारण है। W3C: प्रति फ़ॉन्ट-फ़ेस फ़ॉन्ट डिस्प्ले नियंत्रित करना।

“Sample Collection” नाम की हेडिंग, “Section One” नाम के नेविगेशन और कई पैराग्राफ़ वाले एक काल्पनिक पेज के लिए, पढ़ने वाले टेक्स्ट पर पहले fallback पर विचार करें। छोटी हेडिंग के लिए swap पर विचार करें, अगर अंततः उसका टाइपफ़ेस इस्तेमाल करना महत्वपूर्ण हो। जब पहली बार दिखने वाली रेंडरिंग बनाए रखना प्राथमिकता हो, तो optional चुनें। ये सुझाव पाठक के काम के आधार पर दस्तावेज़ में बताई गई नीतियों को लागू करते हैं; ये मापे गए परिणाम नहीं हैं।

दिखने और रीफ़्लो के लिए निर्णय-सहायक इस्तेमाल करें

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

1. फ़ॉलबैक फ़ॉन्ट में पेज पढ़ें। क्या कोई “Section One” समझ सकता है, हेडिंग पहचान सकता है और पैराग्राफ़ पढ़ सकता है? अगर हाँ, तो दिखने वाला फ़ॉलबैक एक उपयुक्त शुरुआती विकल्प है।
2. फ़ॉन्ट बदलते हुए देखें। क्या हेडिंग में एक लाइन और जुड़ती है? क्या लेबल अगली लाइन पर जाते हैं? क्या अगला पैराग्राफ़ नीचे खिसकता है?
3. बदलाव की स्वीकार्य अवधि चुनें। देर से फ़ॉन्ट बदलना स्वीकार्य हो, तो swap इस्तेमाल करें; केवल शुरुआती बदलाव ठीक हो, तो fallback; और पहला दिखने वाला फ़ॉन्ट बनाए रखना हो, तो optional।
4. टेक्स्ट खाली रखने का ठोस कारण माँगें। block चुनने से पहले पहचानें कि फ़ॉलबैक में क्या इस्तेमाल के लायक नहीं रहेगा और उस निर्भरता को हटाना क्यों संभव नहीं है।

उदाहरण के लिए, मान लें कि “Sample Collection” फ़ॉलबैक में एक लाइन में और डाउनलोड किए गए फ़ॉन्ट में दो लाइनों में आता है। अगर हेडिंग की काल्पनिक लाइन ऊँचाई 40 पिक्सेल है, तो समान स्पेसिंग मानते हुए अतिरिक्त लाइन उसकी ऊँचाई में 40 पिक्सेल जोड़ती है। उसके नीचे की सामग्री भी उसी अनुसार खिसक सकती है। ये समझाने के लिए दिए गए मान हैं, ब्राउज़र के माप नहीं।

कुछ समय के लिए छिपाने से यह बेमेल ठीक नहीं होता। व्यावहारिक विकल्प हैं फ़ॉलबैक का मेल बेहतर करना, जाँच के बाद लेआउट समायोजित करना, या ऐसी नीति चुनना जो देर से बदलाव से बचे। मौजूदा W3C ड्राफ़्ट के optional व्यवहार के तहत, फ़ॉलबैक टेक्स्ट एक बार पेंट हो जाने पर उस पेज के बाकी समय में वैकल्पिक फ़ेस उसकी जगह नहीं ले सकता। W3C की वैकल्पिक परिभाषा।

Mac पर विकल्प कैसे लागू करें और जाँचें

ऐसा पेज इस्तेमाल करें जिसकी स्टाइलशीट आप संपादित कर सकें और जिसमें मौजूदा वेब फ़ॉन्ट पहले से सफलतापूर्वक लोड होता हो। फ़ॉन्ट फ़ाइल का मौजूदा संदर्भ बनाए रखें; इस तुलना के लिए कोई नया फ़ॉन्ट डाउनलोड या वैकल्पिक एसेट ज़रूरी नहीं है।

पेज की सोर्स स्टाइलशीट या समर्थित फ़ॉन्ट कॉन्फ़िगरेशन में संबंधित @font-face घोषणा खोजें। उसके font-display डिस्क्रिप्टर को परीक्षण वैल्यू पर सेट करें, जैसे font-display: fallback;। वेट और स्टाइल के लिए इस्तेमाल होने वाली अन्य घोषणाएँ भी देखें, ताकि परीक्षण में वे फ़ेस शामिल हों जिनका पेज वास्तव में अनुरोध करता है। डिस्क्रिप्टर कहाँ रखा जाता है, यह MDN के font-display उदाहरण में दिखाया गया है।

अपने Mac पर Chrome में DevTools खोलने के लिए Command + Option + I दबाएँ। या लक्ष्य टेक्स्ट पर राइट-क्लिक करके Inspect चुनें; Elements पैनल में Styles के तहत उस पर लागू CSS दिखती है। Chrome के DevTools खोलने के निर्देश दोनों तरीके बताते हैं।

स्टाइलशीट में हर बदलाव के बाद नीचे दी गई तुलना करें। विंडो की चौड़ाई और ज़ूम एक समान रखें, ताकि आप अंतर का कारण फ़ॉन्ट-लोडिंग नीति को मान सकें।

1. Network खोलें, Disable cache सक्षम करें, Throttling मेनू से धीमा प्रीसेट चुनें और पेज फिर से लोड करें। फ़ॉन्ट अनुरोधों पर ध्यान देने के लिए Font फ़िल्टर इस्तेमाल करें।
2. हेडिंग, नेविगेशन और पैराग्राफ़ की शुरुआत देखें। दर्ज करें कि टेक्स्ट पहले खाली रहता है, फ़ॉलबैक में दिखता है या बाद में उसके लाइन ब्रेक बदलते हैं।
3. अगर बदलाव देखने के लिए बहुत जल्दी होता है, तो Network पैनल की सेटिंग में Capture screenshots सक्षम करें और लोडिंग क्रम देखने के लिए पेज फिर से लोड करें।
4. थ्रॉटलिंग बंद करें और Disable cache को अनचेक करें। सामान्य परिस्थितियों में दोबारा आने वाले विज़िट से तुलना करने के लिए पेज फिर से लोड करें। Chrome के Network फीचर संदर्भ इन नियंत्रणों का वर्णन करता है।

फ़ॉन्ट अनुपलब्ध होने की स्थिति को अलग से जाँचें। Network में असली फ़ॉन्ट अनुरोध पर राइट-क्लिक करके Block request चुनें, फिर पेज फिर से लोड करें। Chrome मेल खाता पैटर्न Request conditions में दिखाता है। जाँचें कि शब्द पढ़ने योग्य हों और फ़ॉलबैक में पेज इस्तेमाल करने योग्य बना रहे। इसके बाद परीक्षण पैटर्न हटाएँ या बंद करें। Chrome का request conditions दस्तावेज़ अनुरोधों को ब्लॉक करने और ब्लॉक किए गए अनुरोधों की पहचान करने का तरीका बताता है।

अगर Safari भी आपके लक्षित Mac ब्राउज़िंग परिवेश का हिस्सा है, तो वहाँ भी पेज की समीक्षा दोहराएँ। Chrome परीक्षण को उसी ब्राउज़र की रेंडरिंग का प्रमाण मानें, हर जगह एक जैसी टाइमिंग का नहीं: विनिर्देश ब्राउज़रों के बीच अंतर की अनुमति देता है। ब्राउज़र, परीक्षण वैल्यू, शुरुआत में टेक्स्ट की दृश्यता और देखे गए लाइन ब्रेक के साथ एक छोटा तुलना नोट रखें।

अगर दिखने वाला फ़ॉलबैक लेआउट में बहुत बदलाव करे तो?

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

और करीब से मेल कराने के लिए size-adjust फ़ेस की ग्लिफ़ आउटलाइन और मेट्रिक्स को स्केल करता है, जिसमें ग्लिफ़ की चौड़ाई भी शामिल है। MDN बताता है कि स्थानीय फ़ॉलबैक फ़ेस परिभाषित करके उसे मुख्य वेब फ़ॉन्ट से बेहतर मेल खाने के लिए कैसे समायोजित करें। अपने फ़ॉन्ट की जोड़ी के लिए उपयुक्त प्रतिशत तय करें; दस्तावेज़ के उदाहरण का प्रतिशत हर जगह लागू होने वाली सेटिंग नहीं है। MDN: size-adjust।

ऊर्ध्वाधर मेट्रिक्स की अलग से जाँच करें। ascent-override डिस्क्रिप्टर लाइन बॉक्स का लेआउट बनाते समय बेसलाइन के ऊपर इस्तेमाल होने वाले मेट्रिक को नियंत्रित करता है, लेकिन MDN अभी इसकी उपलब्धता को सीमित बताता है। इस समायोजन को एक अतिरिक्त सुधार मानें और उन ब्राउज़रों में भी पढ़ने योग्य फ़ॉलबैक लेआउट बनाए रखें जो इसे सपोर्ट नहीं करते। MDN: ascent-override।

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

क्या प्रीलोड या फ़ॉन्ट-लोडिंग लाइब्रेरी से निर्णय बदलता है?

प्रीलोडिंग से संसाधन खोजने में मदद मिलती है। WHATWG HTML Standard preload को मौजूदा नेविगेशन के लिए अपेक्षित संसाधन को पहले से फ़ेच और कैश करने के रूप में परिभाषित करता है। यह आपकी font-display नीति नहीं चुनता। स्वीकार्य दृश्य व्यवहार चुनने के बाद ही इस पर विचार करें; जल्दी फ़ेच करना इस निर्णय का विकल्प नहीं है कि फ़ेस अब भी उपलब्ध न होने पर क्या होगा। WHATWG: Link type preload।

सामान्य पेज टेक्स्ट के लिए CSS से शुरुआत करें। अगर कोई मौजूदा प्रोजेक्ट Font Face Observer इस्तेमाल करता है, तो उसका दस्तावेज़ीकृत load() मेथड एक प्रॉमिस लौटाता है, जो फ़ॉन्ट लोड होने पर पूरा होता है और विफल होने पर अस्वीकृत होता है। उसका फ़ैमिली नाम और वैकल्पिक वेट, स्टाइल तथा स्ट्रेच विवरण अनुरोधित फ़ेस से मेल खाना चाहिए। लाइब्रेरी यह भी बताती है कि फ़ॉन्ट में उसके डिफ़ॉल्ट अक्षर मौजूद न हों तो उपयुक्त परीक्षण टेक्स्ट कैसे दिया जाए। Font Face Observer दस्तावेज़।

लाइब्रेरी का सफल कॉलबैक लोडिंग का संकेत है; क्या दिखेगा, यह अब भी आपका ऐप तय करता है। अगर कस्टम लॉजिक टेक्स्ट छिपाता है, तो विफलता की ऐसी स्थिति तय करें जो पढ़ने योग्य फ़ॉलबैक वापस दिखाए। वरना, लोड अस्वीकृत होने पर ऐप का छिपाने वाला नियम लागू रह सकता है। यह लाइब्रेरी में दर्ज सफलता और विफलता के तरीकों से निकली एक कार्यान्वयन संबंधी सलाह है।

नेटिव API की भी ऐसी ही सीमा है। document.fonts.ready उन इस्तेमाल किए गए फ़ॉन्ट के लोडिंग और लेआउट ऑपरेशनों के पूरे होने पर फ़ुलफ़िल होता है; यह समूह सभी घोषित फ़ॉन्ट से अलग हो सकता है, जिसमें वे वैकल्पिक फ़ेस भी शामिल हैं जिनका अवसर निकल चुका है। इसलिए इससे यह साबित नहीं होता कि हर मनचाहा फ़ेस दिख रहा है। MDN: Document fonts प्रॉपर्टी।

इसी तरह, document.fonts.load() का वैकल्पिक टेक्स्ट आर्ग्युमेंट यूनिकोड रेंज के ज़रिए मेल खाते फ़ेस चुनता है; यह अलग-अलग ग्लिफ़ के कवरेज की जाँच नहीं करता। लोडिंग पूरी होना और पूरे नमूने का सही रेंडर होना अलग-अलग जाँचें हैं। MDN: FontFaceSet load() मेथड।

एक ही पेज के धीमे लोड, अनुपलब्ध फ़ॉन्ट और दोबारा लोड वाले रूपों की समीक्षा करके नीति चुनें। सामान्य शब्दों को पढ़ने योग्य रखें, साफ़ तौर पर तय करें कि देर से फ़ॉन्ट बदलना स्वीकार्य है या नहीं, और कुछ समय के लिए छिपाने का विकल्प केवल वहाँ अपनाएँ जहाँ कोई छोटा तत्व स्पष्ट रूप से फ़ॉन्ट पर निर्भर हो। नतीजे में हर जाँची गई स्थिति में कोई व्यक्ति “Sample Collection” आराम से पढ़ना जारी रख सके।

स्रोत

• font-display CSS at-rule descriptor — MDN Web Docs।
• CSS Fonts Module Level 4 — W3C।
• Open Chrome DevTools — Chrome for Developers।
• Network features reference — Chrome for Developers।
• Request conditions: Test your site by blocking or throttling network requests — Chrome for Developers।
• size-adjust CSS at-rule descriptor — MDN Web Docs।
• ascent-override CSS at-rule descriptor — MDN Web Docs।
• HTML Standard: Link type preload — WHATWG।
• Font Face Observer — fast and simple web font loading — Font Face Observer, Bram Stein।
• Document: fonts property — MDN Web Docs।
• FontFaceSet: load() method — MDN Web Docs।