फ़ॉन्ट-फेस लागू होने पर कैसे पता चलेगा

मैं वर्तमान में एक ऐसे ग्राहक के लिए कॉर्पोरेट वेबसाइट बना रहा हूं जो कस्टम फोंट का व्यापक रूप से उपयोग करता है।फ़ॉन्ट-फेस लागू होने पर कैसे पता चलेगा

jQuery पर डोम-तैयार मैं प्लेसमेंट गणना कर रहा हूं यह पता लगाने के लिए कि गतिशील चौड़ाई और ऊंचाई वाले कुछ पॉप-अप मेनू उनकी गतिशील सामग्री के आधार पर रखा जाना चाहिए।

ये गणना विफल हो जाती है, चूंकि फ़ॉन्ट-फेस लागू होने से पहले डीओएम-तैयार निकाल दिया जाता है, और इस प्रकार चौड़ाई और ऊंचाई गलत होती है।

अभी (प्रोटोटाइप के लिए) मैं इस समस्या को कम करने के लिए डीओएम तैयार होने के बाद 500ms की गणना कर रहा हूं, लेकिन यह स्पष्ट कारणों से उत्पादन में नहीं जा सकता है।

समस्या नवीनतम फ़ायरफ़ॉक्स और क्रोम में देखी गई है। आईई 8 में समस्या नहीं प्रतीत होती है, लेकिन फिर डोम-तैयार आग काफी देर हो चुकी है, इसलिए देरी मुझे लगता है कि :)

लोड इवेंट की प्रतीक्षा करना एक विकल्प नहीं है, इसलिए मेरा प्रश्न आप यह हैं:

क्या फ़ॉन्ट-फेस लागू होने पर पता लगाने के लिए कोई विश्वसनीय क्रॉस-ब्राउज़र तरीका है?

स्रोत

2011-07-13 Martin Jespersen

ठीक है, मुझे यकीन नहीं है कि यह मदद करेगा, लेकिन दस्तावेज़ पर अपना जादू करने की बजाय। Windows.load पर इसे करने का प्रयास करें। यह थोड़ी देर बाद आग लगती है जब छवियों को लोड किया जाता है, लेकिन कुछ फ़ॉन्ट-झिलमिलाहट हो सकती है, जो अवांछनीय लगती है। – ddinchev

जैसा कि मैंने पहले ही कहा है, लोड इवेंट की प्रतीक्षा करना एक विकल्प नहीं है। –

ठीक है, तो आप फ़ॉन्ट-फेस को लागू करने के लिए क्या उपयोग करते हैं? इस तरह की चीजों को करने के लिए पुस्तकालय हैं जिनके पास पहले से ही सही जगह पर उचित घटना हो सकती है। क्यूफॉन, एफएलआईआर और एसआईएफआर कुछ ऐसे हैं जो मुझे याद है कि फ़ॉन्ट-प्रतिस्थापन से निपटने के लिए बिल्कुल सही मतलब है और अगर वे उपर्युक्त मुद्दे को ठीक करने में कामयाब नहीं रहे हैं तो मुझे आश्चर्य होगा! – ddinchev

मुझे यह सोचने के बाद एक समाधान मिला कि आईई इस समस्या से क्यों पीड़ित नहीं है।

फ़ायरफ़ॉक्स और क्रोम/सफारी फ़ॉन्ट-फेस लागू होने से पहले DOMContentLoaded ईवेंट ट्रिगर करता है, इस प्रकार समस्या उत्पन्न होती है। की है जो -

समाधान के लिए DOMContentLoaded के लिए बात नहीं लेकिन इसके बजाय oldschool जाने के लिए और onreadystatechange सुनने और document.readyState === 'complete' जो हमेशा के बाद फॉन्ट-फेस लागू किया जाता है शुरू हो रहा है जब तक प्रतीक्षा करें (जहाँ तक मैं अपने परीक्षणों से बता सकते हैं) है पाठ्यक्रम आईई में हमेशा क्या होता है क्योंकि यह DOMContentLoaded का समर्थन नहीं करता है। -

तो बुनियादी तौर पर आप रोल-अपने-खुद कर सकते हैं jQuery में घटना fontfaceapplied कहा जाता है शायद यह में बनाया जाना चाहिए;)

document.onreadystatechange = function() { 
    if (document.readyState === 'complete') 
     $(document).trigger('fontfaceapplied'); 
};

मजेदार तथ्य: ओपेरा यह होता है सही और फ़ॉन्ट जब तक DOMContentLoaded गति प्रदान करने के इंतजार कर रहा है -फेस लागू किया गया है।

स्रोत

2011-07-13 12:29:08

+1। हम्म। बहुत रोचक, और अनुसंधान का एक उत्कृष्ट बिट। इसे साझा करने के लिए धन्यवाद। मुझे यह याद रखना होगा। (बीटीडब्ल्यू, मुझे आपके निकट भविष्य में 'सेल्फ लर्नर' बैज का एहसास है .... ;-)) – Spudley

उत्कृष्ट जवाब, हालांकि मुझे पता चला कि क्रोम (16.0.912.77) रिपोर्ट करेगा कि तैयारस्टेट 'पूर्ण' है, भले ही फ़ॉन्ट -फेस लागू नहीं किया गया है। यदि यह लागू किया गया है तो अधिक सटीक रूप से यह उपलब्ध नहीं होगा यदि आप इसे कैनवास संदर्भ जैसे किसी चीज़ में उपयोग करने का प्रयास कर रहे हैं। इसके अलावा, एक जाल मैं अभी तक गिर गया, jQuery 'पूर्ण' तक अपनी तैयार घटना को आग लगाने की प्रतीक्षा नहीं करेगा, अगर राज्य 'इंटरैक्टिव' – tapi

@tapi है तो jQuery भी तैयार हो जाएगा: jQuery तैयार तैयार घटना DOMContentLoaded को सुनती है तो यह बेकार है कस्टम फ़ॉन्ट्स के साथ प्रयोग किया जाता है। –

200ms के टाइमआउट के बाद ट्रिगर करने के लिए फ़ंक्शन को सेट करना Google फ़ॉन्ट्स का उपयोग करते समय इस समस्या को हल करता है।

एक ध्यान देने योग्य कूद है, लेकिन आमतौर पर बराबर ऊंचाइयों के सामान के लिए होता है, शुद्धियों के लिए यह सही नहीं हो सकता है लेकिन यह क्रॉस ब्राउज़र का काम करता है।

स्रोत

2014-03-27 17:52:07 chim

फ़ॉन्ट-फेस लागू होने पर कैसे पता चलेगा

उत्तर

संबंधित मुद्दे