एक कारण यह है कि आजकल वेब डिज़ाइनर वेब फोंट (आमतौर पर WOFF प्रारूप में) का उपयोग करना पसंद करते हैं , जैसे Google वेब फोंट के माध्यम से ।
पहले, केवल एक फ़ॉन्ट जो किसी साइट पर प्रदर्शित होने में सक्षम था, वह था जिसे उपयोगकर्ता ने स्थानीय रूप से इंस्टॉल किया था। चूंकि उदाहरण के लिए मैक और विंडोज उपयोगकर्ताओं के पास आवश्यक रूप से एक ही फोंट नहीं थे, इसलिए डिजाइनरों ने सहज रूप से हमेशा नियमों को परिभाषित किया
font-family: Arial, Helvetica, sans-serif;
जहां, यदि सिस्टम पर पहला फॉन्ट नहीं मिला है, तो ब्राउज़र दूसरे के लिए दिखेगा, और अंत में एक फॉलबैक "सैन्स-सेरिफ़" फॉन्ट होगा।
अब, कोई फ़ॉन्ट URL को ब्राउज़र डाउनलोड करने के लिए CSS नियम के रूप में दे सकता है, जैसे:
@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700);
और फिर उदाहरण के लिए एक विशिष्ट तत्व के लिए फ़ॉन्ट लोड करें:
font-family: 'Droid Serif',sans-serif;
यह कस्टम फोंट का उपयोग करने में सक्षम होने के लिए बहुत लोकप्रिय है, लेकिन यह भी समस्या का कारण बनता है कि ब्राउज़र द्वारा संसाधन लोड किए जाने तक कोई पाठ प्रदर्शित नहीं होता है, जिसमें डाउनलोड समय, फ़ॉन्ट लोडिंग समय और रेंडर समय शामिल है। मुझे उम्मीद है कि यह वह कलाकृति है जो आप अनुभव कर रहे हैं।
एक उदाहरण के रूप में: मेरे राष्ट्रीय समाचार पत्रों में से एक, डागेंस न्येथर , अपने हेडलाइन्स के लिए वेब फोंट का उपयोग करता है, लेकिन उनके लीड्स का नहीं, इसलिए जब उस साइट को लोड किया जाता है, तो मैं आमतौर पर लीड को पहले देखता हूं, और आधे सेकंड के बाद ऊपर के सभी रिक्त स्थान पॉपुलेटेड होते हैं। सुर्खियों के साथ (यह क्रोम और ओपेरा पर सच है, कम से कम। दूसरों की कोशिश नहीं की गई है)।
(इसके अलावा, डिजाइनर इन दिनों हर जगह जावास्क्रिप्ट को पूरी तरह से छिड़कते हैं, इसलिए हो सकता है कि कोई व्यक्ति पाठ के साथ कुछ चतुर करने की कोशिश कर रहा है, जिसके कारण देरी हो रही है। यह बहुत विशिष्ट साइट होगी, हालांकि: पाठ की सामान्य प्रवृत्ति इन में देरी हो सकती है। समय ऊपर वर्णित वेब फ़ॉन्ट समस्या है, मुझे विश्वास है।)
इसके अलावा
यह उत्तर बहुत ही उलझा हुआ था, हालांकि मैं बहुत विस्तार में नहीं गया था, या शायद इस वजह से। प्रश्न सूत्र में कई टिप्पणियां दी गई हैं, इसलिए मैं थोड़ा विस्तार करने की कोशिश करूंगा (विषय की रक्षा के बाद थोड़ी बहुत टिप्पणियां गायब हो गई हैं - कुछ मध्यस्थ शायद मैन्युअल रूप से उन्हें साफ करते हैं)। इसके अलावा, इस धागे में अन्य उत्तरों को पढ़ें क्योंकि वे सभी अपने तरीके से विस्तार करते हैं।
इस घटना को सामान्य रूप से "अस्थिर सामग्री की फ्लैश" के रूप में जाना जाता है, और विशेष रूप से "अस्थिर पाठ का फ्लैश"। "FOUC" और "FOUT" के लिए खोज करने से अधिक जानकारी मिलती है।
मैं वेब फोंट के संबंध में वेब डिजाइनर पॉल आयरिश के पोस्ट को FOUT पर सुझा सकता हूं ।
कोई भी नोट कर सकता है कि विभिन्न ब्राउज़र इसे अलग तरीके से संभालते हैं। मैंने ऊपर लिखा था कि मैंने ओपेरा और क्रोम का परीक्षण किया था, जो दोनों समान व्यवहार करते थे। सभी WebKit आधारित वाले (Chrome, Safari, आदि) वेब फ़ॉन्ट लोडिंग अवधि के दौरान फ़ॉलबैक फ़ॉन्ट के साथ वेब फ़ॉन्ट पाठ का प्रतिपादन न करके फ़िश से बचने का चयन करते हैं । यहां तक कि अगर वेब फ़ॉन्ट कैश किया गया है, वहाँ होगा एक देरी प्रस्तुत करना हो । इस प्रश्न सूत्र में बहुत सारी टिप्पणियां हैं जो अन्यथा कह रही हैं और यह गलत है कि कैश्ड फोंट इस तरह का व्यवहार करते हैं, लेकिन ऊपर दिए गए लिंक से:
किन मामलों में आपको FOUT मिलेगा
- होगा: दूरस्थ ttf / otf / woff को डाउनलोड करना और प्रदर्शित करना
- होगा: कैश्ड ttf / otf / woff प्रदर्शित करना
- होगा: डेटा-यूआरआई ttf / otf / woff को डाउनलोड करना और प्रदर्शित करना
- होगा: कैश्ड डेटा-यूटीआई टीटीएफ / ओटीएफ / वॉफ प्रदर्शित करना
- नहीं होगा: एक फ़ॉन्ट प्रदर्शित करना जो पहले से ही स्थापित है और आपके पारंपरिक फ़ॉन्ट स्टैक में नाम है
- नहीं होगा: स्थानीय () स्थान का उपयोग करके स्थापित और नामित एक फ़ॉन्ट प्रदर्शित करना
चूंकि रेंडर करने से पहले क्रोम जोखिम का इंतजार करता है, इसलिए इससे देरी होती है। किस हद तक प्रभाव दिखाई देता है (विशेषकर कैश से लोड करते समय) अन्य चीजों पर निर्भर करता है जो पाठ की मात्रा और अन्य कारकों की आवश्यकता होती है, लेकिन कैशिंग प्रभाव को पूरी तरह से दूर नहीं करता है।
पोस्ट के निचले भाग में 2011-20104-14 के अनुसार आयरिश व्यवहार में ब्राउज़र व्यवहार के बारे में कुछ अपडेट हैं:
- फ़ायरफ़ॉक्स (FFb11 और FF4 फ़ाइनल के रूप में) में अब फ़ेस नहीं है! Wooohoo! http://bugzil.la/499292 मूल रूप से पाठ 3 सेकंड के लिए अदृश्य है, और फिर यह फॉलबैक फ़ॉन्ट वापस लाता है। Webfont शायद उन तीन सेकंड के भीतर लोड होगा ... हालांकि उम्मीद है कि ..
- IE9 WOFF और TTF और OTF का समर्थन करता है (हालाँकि इसके लिए आपको एक एम्बेडिंग बिट सेट चीज़ की आवश्यकता होती है - यदि आप WFFFF का उपयोग करते हैं तो ज्यादातर लूट)। हालाँकि!!! IE9 में FOUT है। :(
- वेबकिट में 0.5 सेकंड के बाद फ़ॉलबैक टेक्स्ट दिखाने के लिए एक पैच इंतज़ार करना पड़ता है । एफएफ के रूप में एक ही व्यवहार लेकिन 3 के बजाय 0.5 एस।
- जोड़ : पलक के पास इसके लिए एक बग भी पंजीकृत है , लेकिन ऐसा लगता है कि अंतिम सहमति इस बारे में नहीं मिली है कि इसके साथ क्या करना है - वर्तमान में वेबकीट के समान कार्यान्वयन।
यदि यह डिजाइनरों के लिए एक प्रश्न था, तो व्यक्ति इस प्रकार की समस्याओं से बचने के तरीकों में जा सकता है webfontloader
, लेकिन यह एक और प्रश्न होगा। पॉल आयरिश लिंक इस मामले पर और विस्तार से बताता है।