# # 35: टाइपेकिट की रोकथाम करना - सीएसएस-ट्रिक्स

Anonim

हम खोज पर काम करने से थोड़ा विराम लेते हैं ताकि थोड़ी सी समस्या को हल किया जा सके।

"फ़ेसट" "अस्थिर पाठ का फ्लैश"। यह वह घटना है जहां @ फॉन्ट-फेस फोंट लोड करने में थोड़ा सा लेते हैं और इस प्रकार आप कस्टम फॉन्ट से पहले फालबैक फॉन्ट देखते हैं। यह आमतौर पर टाइपेकिट में कोई समस्या नहीं है। न ही यह वास्तव में इन दिनों आधुनिक ब्राउज़रों में एक समस्या है (IE 9 को छोड़कर)। हालाँकि, यह हमारे लिए एक समस्या है क्योंकि हमने विशेष रूप से टाइपेकिट जावास्क्रिप्ट को अतुल्यकालिक रूप से लोड करने के लिए चुना है।

हालांकि आशा नहीं खोई गई है, टाइपेकिट में यह समस्या शामिल है, हमें बस हमारी साइट पर एक काम करने की आवश्यकता है। हमने "wf-loading" (वेब ​​फॉन्ट लोडिंग) नामक तत्व पर एक नया वर्ग नाम रखा है । फिर हमारे सीएसएस में, हम घोषणा करते हैं कि कोई भी चयनकर्ता जो एक कस्टम फ़ॉन्ट का उपयोग करता है, जब तक कि उस वर्ग का नाम नहीं हट जाता है, तब तक उसे छिपाया जाता है। थोड़ा जोखिम भरा आप सोच सकते हैं, लेकिन अगर फ़ॉन्ट लोड करने में विफल रहता है, तो एक समयबाह्य है जो कक्षा को वैसे भी हटा देता है। यह सिर्फ फाइट्स याद रखने के लिए लड़ने के लिए है, बस थोड़ा दृश्य अच्छा है।

हम यह सब थोड़ा सा सास बनाकर करते हैं, @mixinजिसका नाम है “preventFOUT” और @includeइसे अपने कस्टम फॉन्ट स्टाॅक में करना, जो कि @mixins भी हैं ।

यह अब हमारे लिए अच्छा काम करता है। अंततः इस डिज़ाइन में हम HF & J फोंट में चले जाते हैं जिसमें सीधे @ फॉन्ट-फेस के माध्यम से लोड होता है इसलिए हम मूल रूप से इस बारे में चिंता करना बंद कर देते हैं।