एक और बाँधने के लिए समय! इस बार मेरे पास फिलामेंट ग्रुप से Zach Leatherman ऑन है। Zach ने पिछले कुछ वर्षों में वेब फ़ॉन्ट लोड करने के बारे में बहुत सारे शोध, लेखन और बोलने का काम किया है। वह इस पर एक व्यापक गाइड मिल गया है!
डिफ़ॉल्ट तरीके से कुछ समस्याएँ हैं जिन्हें कस्टम फ़ॉन्ट लोड किया गया है। जैसा कि, @ सीएसएस-फॉन्ट के माध्यम से कुछ सीएसएस में एक फॉन्ट को जोड़ना। यहां तक कि जिस तरह से Google फ़ॉन्ट्स आपको अपने फोंट का उपयोग करने के लिए प्रदान करता है Zach एक विरोधी पैटर्न कहता है (अंततः यह सिर्फ वैनिला @ फ़ॉन्ट-चेहरा है)। अलग-अलग ब्राउज़र @ फॉन्ट-फेस के साथ अलग-अलग काम करते हैं। उदाहरण के लिए, सफारी के कुछ संस्करण कस्टम फ़ॉन्ट में अदृश्य सेट टाइप करते हैं जब तक कि फ़ॉन्ट लोड नहीं हो जाता है, लेकिन इसका कोई समयबाह्य नहीं होता है, इसलिए यदि फ़ॉन्ट किसी भी कारण से विफल हो जाता है, तो आप अंतिम सबसे खराब स्थिति में हो सकते हैं: हमेशा के लिए अदृश्य पाठ जगह।
जब तक आप अपने हाथों में मामलों को नहीं लेते, तब तक @ फ़ॉन्ट-फेस फ़ॉन्ट लोड करने पर आपके पास बहुत अधिक नियंत्रण नहीं है। इसका मतलब है कि इस तरह की चीजें हैं: फ़ॉन्ट को कम करना, फ़ॉन्ट को कम करना (या तो ग्लिफ़ के "महत्वपूर्ण" सेट के साथ, या उपयोग में भाषा के लिए कम से कम ग्लिफ़ को कम करना), फ़ॉन्ट लोडरों का उपयोग करके यह निर्धारित करने के लिए कि फोंट लोड होते हैं और उनका उपयोग करने के लिए कक्षाओं को बदल देते हैं। । वह अंतिम एक विशेष रूप से दिलचस्प है। जब फॉन्ट लोडिंग पर नियंत्रण समाप्त हो जाता है, तो आपको न केवल ब्राउज़र के सीएसएस को लोड करने के साथ / साथ कैसे निपटना है, जिसमें @ फॉन्ट-फेस भी शामिल है, लेकिन जब / कैसे ब्राउज़र उन टेक्स्ट फोंट का उपयोग करने के लिए कहा जाता है। उपयोग किए जाने वाले फ़ॉन्ट डाउनलोड नहीं किए गए हैं। तो कभी-कभी प्रक्रिया उन्हें डाउनलोड करने के लिए मजबूर करने, उन्हें डाउनलोड करने के लिए प्रतीक्षा करने, फिर वास्तव में उनका उपयोग करने के लिए कक्षाएं लागू करने के लिए होती है।
कुछ उपकरण जिन्हें हमने देखा:
- फ़ायरफ़ॉक्स DevTools उपयोग में फोंट देखने के लिए बेहतर था
- फॉन्ट स्क्विरेल जनरेटर या फॉन्ट प्रेप में सबसेटिंग फॉन्ट किया जा सकता है।
- आप किस ग्लिफ़ को कम करते हैं? परीक्षण करें कि आपको ग्लिफेनजर के साथ कुछ URL पर क्या चाहिए।
- आप कैसे बता सकते हैं जब ब्राउज़र अशुद्ध बोल्ड / इटैलिक का उपयोग कर रहा है? गलत क़दम।