फ़ॉन्ट-प्रदर्शन - सीएसएस-ट्रिक्स

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

@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

मूल्यों

font-displayसंपत्ति पाँच मान स्वीकार करता है:

• auto(डिफ़ॉल्ट): ब्राउज़र को लोड करने के लिए अपनी डिफ़ॉल्ट विधि का उपयोग करने की अनुमति देता है, जो अक्सर blockमूल्य के समान होता है ।
• block: ब्राउज़र को पाठ को संक्षिप्त रूप से तब तक छिपाने का निर्देश देता है जब तक कि फ़ॉन्ट पूरी तरह से डाउनलोड न हो जाए। अधिक सटीक रूप से, ब्राउज़र पाठ को एक अदृश्य प्लेसहोल्डर के साथ खींचता है, फिर लोड होते ही इसे कस्टम फॉन्ट फेस के साथ स्वैप कर देता है। इसे "अदृश्य पाठ का फ्लैश" या एफओआईटी के रूप में भी जाना जाता है।
• swap: पाठ को प्रदर्शित करने के लिए ब्राउज़र को निर्देश देता है कि पाठ को तब तक प्रदर्शित करें जब तक कि कस्टम फ़ॉन्ट पूरी तरह से डाउनलोड न हो जाए। इसे "अस्थिर पाठ के फ़्लैश" या फ़्यूज़ के रूप में भी जाना जाता है।
• fallback: मूल्यों autoऔर swapमूल्यों के बीच एक समझौता के रूप में कार्य करता है । ब्राउज़र लगभग 100ms के लिए पाठ छिपाएगा और, यदि फ़ॉन्ट अभी तक डाउनलोड नहीं किया गया है, तो फॉलबैक पाठ का उपयोग करेगा। यह डाउनलोड होने के बाद नए फ़ॉन्ट पर स्वैप करेगा, लेकिन केवल एक छोटी स्वैप अवधि (शायद 3 सेकंड) के दौरान।
• optional: जैसे fallback, यह मान ब्राउज़र को शुरू में पाठ को छिपाने के लिए कहता है, फिर एक फॉलबैक फ़ॉन्ट में तब तक संक्रमण करता है जब तक कि कस्टम फ़ॉन्ट का उपयोग करने के लिए उपलब्ध न हो। हालाँकि, यह मान भी ब्राउज़र को यह निर्धारित करने की अनुमति देता है कि क्या कस्टम फ़ॉन्ट का उपयोग किया गया है या नहीं, उपयोगकर्ता के कनेक्शन की गति का निर्धारण निर्धारण कारक के रूप में किया जाता है, जहां धीमे कनेक्शन को कस्टम फ़ॉन्ट प्राप्त करने की संभावना कम होती है।

यहाँ उनके बारे में सोचने का एक और तरीका है

	ब्लॉक की अवधि	स्वैप अवधि
खंड मैथा	कम	अनंत
विनिमय	कोई नहीं	अनंत
मैदान छोड़ना	बेहद छोटा	कम
ऐच्छिक	बेहद छोटा	कोई नहीं

व्हाई वी नीड font-display

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

फिर वह @font-faceनियम आया जिसने वेब डिज़ाइनर्स और फ्रंट-एंड डेवलपर्स को पहले की तुलना में नई टाइपोग्राफिक शक्तियाँ दीं। इसने हमें फ़ॉन्ट फ़ाइलों को एक सर्वर पर अपलोड करने और हमारी स्टाइलशीट में नियमों का एक सेट लिखने की अनुमति दी, जो फ़ॉन्ट को नाम देता है और ब्राउज़र को बताता है कि फ़ाइलों को कहाँ डाउनलोड करना है। इसने Google फ़ॉन्ट्स जैसी सेवाओं को भी जन्म दिया जिसने कस्टम फोंट को जन-जन तक पहुंचाया। अंत में, प्रिंट डिजाइन से वेब डिज़ाइन को अलग करने वाली एक बड़ी बाधा को टॉप किया गया था!

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

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

न तो फ़िश और न ही एफओआईटी महान है। हमारे पास प्रभावों को कम करने में मदद करने के लिए कस्टम फोंट के प्रदर्शन को अनुकूलित करने के तरीके हैं। हालाँकि, अब हमें font-displayब्राउजर को यह बताना होगा कि क्या हम FOUT, FOIT या बीच में भी कुछ पसंद करते हैं।

समर्थन के लिए परीक्षण

ईम विदेस द्वारा नोट किए गए दिलचस्प तथ्य:

CSS फॉन्ट-डिस्प्ले एक @font-faceडिस्क्रिप्टर है और प्रॉपर्टी नहीं है, इसलिए ब्राउज़र में इसके सपोर्ट को फीचर क्वेरीज़ (CSS @supportsरूल और CSS.supports API) के साथ टेस्ट नहीं किया जा सकता है ।

अधिक जानकारी

• सीएसएस फ़ॉन्ट रेंडरिंग नियंत्रण मॉड्यूल स्तर 1 विशिष्टता: संपत्ति के लिए विनिर्देश का एक मसौदा।
• font-display जनता के लिए: जेरेमी वैगनर ने हमें यहां सीएसएस-ट्रिक्स की संपत्ति से परिचित कराया।
• उपयोग करना @font-face: नियम का एक व्यापक विवरण और इसका उपयोग करने के तरीके के लिए सर्वोत्तम अभ्यास।
• सिस्टम फॉन्ट स्टैक: पूरी तरह से कस्टम फोंट के लिए एक स्निपेट और पूरी तरह से उपयोगकर्ता के सिस्टम फोंट पर भरोसा करते हैं।
• फ़ॉन्ट प्रदर्शन को नियंत्रित करना font-display: Google द्वारा इस विषय पर एक अच्छा लेखन।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
६०	५ 58	नहीं न	। ९	11.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	11.3-11.4