आज का प्रश्न और उत्तर सत्र हमारे पास सुपरयूसर की सौजन्य है - स्टैक एक्सचेंज का एक उपविभाग, क्यू एंड ए वेब साइट्स का एक समुदाय संचालित समूह।
प्रश्न
सुपरयूसर रीडर लॉरेन इस बारे में बहुत उत्सुक है कि क्यों एक ही समय में एक बार एक बार किए गए तत्वों की तुलना में बिल्कुल अलग-अलग तत्वों को लोड करना प्रतीत होता है। वह लिखता है:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
तो क्या देता है? लॉरेन, और हम में से कई, एक समय याद रखें जब पाठ पहले लोड हो गया था और बाकी सब कुछ-गारिश एनिमेटेड जीआईएफ, टाइल पृष्ठभूमि, और 90 के दशक के अंत में वेब ब्राउज़िंग के अन्य सभी कलाकृतियों बाद में आया था। पहले डिजाइन तत्वों की वर्तमान स्थिति का कारण क्या है, बाद में पाठ?
उत्तर
सुपरयूसर योगदानकर्ता डैनियल एंडर्सन एक अद्भुत विस्तृत उत्तर प्रदान करता है जो कि क्यों-द-फोंट-लोड-आखिरी रहस्य के नीचे सही हो जाता है:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
जहां, अगर पहला फ़ॉन्ट सिस्टम पर नहीं मिला था, तो ब्राउज़र दूसरे की तलाश करेगा, और आखिर में फॉलबैक "सैन्स-सेरिफ़" फ़ॉन्ट होगा।
अब, कोई फ़ॉन्ट डाउनलोड करने के लिए ब्राउजर प्राप्त करने के लिए कोई सीएसएस नियम के रूप में एक फ़ॉन्ट यूआरएल दे सकता है, जैसे:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
और उसके बाद फ़ॉन्ट द्वारा एक विशिष्ट तत्व के लिए फ़ॉन्ट लोड करें.:
font-family: 'Droid Serif',sans-serif;
यह कस्टम फोंट का उपयोग करने में सक्षम होने के लिए बहुत लोकप्रिय है, लेकिन यह समस्या की ओर जाता है कि ब्राउज़र द्वारा संसाधन लोड होने तक कोई टेक्स्ट प्रदर्शित नहीं होता है, जिसमें डाउनलोड समय, फ़ॉन्ट लोडिंग समय और प्रस्तुत करने का समय शामिल होता है। मैं उम्मीद करता हूं कि यह वह कलाकृति है जिसे आप अनुभव कर रहे हैं।
एक उदाहरण के रूप में: मेरे राष्ट्रीय समाचार पत्रों में से एक, डैगन न्येटर, उनके शीर्षकों के लिए वेब फोंट का उपयोग करते हैं, लेकिन उनकी लीड नहीं, इसलिए जब उस साइट को लोड किया जाता है तो मैं आम तौर पर पहले लीड देखता हूं, और आधे सेकेंड बाद सभी खाली रिक्त स्थान आबादी वाले होते हैं हेडलाइंस के साथ (यह कम से कम क्रोम और ओपेरा पर सच है। दूसरों की कोशिश नहीं की है)।
(साथ ही, डिज़ाइनर इन दिनों जावास्क्रिप्ट को हर जगह छिड़काते हैं, इसलिए हो सकता है कि कोई पाठ के साथ कुछ चालाक करने की कोशिश कर रहा है, यही कारण है कि इसमें देरी हो रही है। यह बहुत ही विशिष्ट साइट होगी, हालांकि: इनके लिए टेक्स्ट में देरी की सामान्य प्रवृत्ति समय ऊपर वर्णित वेब फोंट मुद्दा है, मुझे विश्वास है।)
इसके अलावा:
यह जवाब बहुत उग्र हो गया, हालांकि मैं ज्यादा विस्तार से नहीं आया, या शायदइसलिये इस का। प्रश्न धागे में कई टिप्पणियां हुई हैं, इसलिए मैं थोड़ा विस्तार करने की कोशिश करूंगा […]
इस घटना को आम तौर पर "अनस्टाइल सामग्री का फ्लैश" और विशेष रूप से "अनस्टाइल टेक्स्ट का फ्लैश" के रूप में जाना जाता है। "एफओयूसी" और "फाउट" के लिए खोज अधिक जानकारी देता है।
मैं वेब फोंट के संबंध में वेब डिजाइनर पॉल आयरिश की पोस्ट को FOUT पर अनुशंसा कर सकता हूं।
क्या कोई नोट कर सकता है कि अलग-अलग ब्राउज़र इसे अलग-अलग संभालते हैं। मैंने उपरोक्त लिखा है कि मैंने ओपेरा और क्रोम का परीक्षण किया था, जो दोनों समान व्यवहार करते थे। सभी वेबकिट आधारित (क्रोम, सफारी, आदि) द्वारा FOUT से बचने का चयन करेंनहीं वेब फ़ॉन्ट लोडिंग अवधि के दौरान फ़ॉलबैक फ़ॉन्ट के साथ वेब फ़ॉन्ट टेक्स्ट प्रस्तुत करना। भले ही वेब फ़ॉन्ट कैश किया गया है, वहांमर्जी रेंडर देरी हो । इस सवाल धागे में अन्यथा कहने की बहुत सारी टिप्पणियां हैं और यह गलत है कि कैश किए गए फोंट इस तरह व्यवहार करते हैं, लेकिन उदा। उपरोक्त लिंक से:
आप किस मामले में एक फूट प्राप्त करेंगे
- मर्जी: एक दूरस्थ ttf / otf / woff डाउनलोड और प्रदर्शित करना
- मर्जी: एक कैश्ड ttf / otf / woff प्रदर्शित करना
- मर्जी: डेटा-यूरी ttf / otf / woff डाउनलोड और प्रदर्शित करना
- मर्जी: एक कैश डेटा-यूरी ttf / otf / woff प्रदर्शित करना
- नहीं होगा: एक फ़ॉन्ट प्रदर्शित करना जो पहले से स्थापित है और आपके पारंपरिक फ़ॉन्ट स्टैक में नामित है
- नहीं होगा: एक फ़ॉन्ट प्रदर्शित करना जो स्थानीय () स्थान का उपयोग करके स्थापित और नामित है
चूंकि क्रोम तब तक प्रतीक्षा करता है जब तक कि प्रतिपादन से पहले FOUT जोखिम समाप्त हो जाता है, इससे देरी हो जाती है। किसकोसीमा प्रभाव दिखाई देता है (विशेष रूप से जब कैश से लोड हो रहा है) अन्य चीजों के बीच निर्भर करता है जो पाठ की मात्रा और शायद अन्य कारकों के रूप में निर्भर करता है, लेकिन कैशिंग प्रभाव को पूरी तरह से हटा नहीं देती है।
आयरिश में पोस्ट के निचले हिस्से में 2011-04-14 के अनुसार ब्राउज़र व्यवहार से संबंधित कुछ अपडेट भी हैं:
- फ़ायरफ़ॉक्स (एफएफबी 11 और एफएफ 4 फ़ाइनल के रूप में) अब एक फूट नहीं है! Wooohoo! Http: //bugzil.la/499292 मूल रूप से पाठ 3 सेकंड के लिए अदृश्य है, और फिर यह फ़ॉलबैक फ़ॉन्ट वापस लाता है। वेबफॉन्ट शायद उन तीन सेकंड के भीतर लोड हो जाएगा हालांकि … उम्मीद है..
- आईई 9 डब्ल्यूओएफएफ और टीटीएफ और ओटीएफ का समर्थन करता है (हालांकि इसे एक एम्बेडिंग बिटसेट चीज़ की आवश्यकता होती है- यदि आप डब्ल्यूओएफएफ का उपयोग करते हैं तो ज्यादातर म्यूट करें)। हालाँकि!!! आईई 9 में एक फूट है।:(
- वेबकिट में पैच 0.5 सेकंड के बाद फ़ॉलबैक टेक्स्ट दिखाने के लिए जमीन की प्रतीक्षा कर रहा है। एफएफ के समान व्यवहार लेकिन 3 एस के बजाय 0.5s।
यदि यह डिजाइनरों के लिए एक प्रश्न था, तो इस तरह की समस्याओं से बचने के तरीकों में से कोई भी जा सकता है
webfontloader
लेकिन यह एक और सवाल होगा। पॉल आयरिश लिंक इस मामले पर और विस्तार से चला जाता है।
स्पष्टीकरण में जोड़ने के लिए कुछ है? टिप्पणियों में आवाज उठाओ। अन्य तकनीक-समझदार स्टैक एक्सचेंज उपयोगकर्ताओं से अधिक उत्तरों पढ़ना चाहते हैं? यहां पूर्ण चर्चा धागा देखें।
