🛡️ 🎿 👨🏾‍🔧 नया बुलेटप्रूफ @ फॉन्ट-फेस सिंटेक्स 🧕🏼 😓 💶

"वेब फ़ॉन्ट क्रांति" की शुरुआत से, हमने सभी ब्राउज़रों में वेब से फोंट डाउनलोड करने के लिए @ फॉन्ट-फेस घोषणाओं के सुंदर हैक पर भरोसा किया है। क्या कोई बेहतर तरीका हो सकता है? पूरी तरह से चिकना और भविष्य के ब्राउज़रों के साथ संगत है?

संक्षेप में मुद्दे के इतिहास के बारे में

सितंबर 2009 में, पॉल आयरिश ने @ फॉन्ट-फेस घोषणाओं को लिखने के लिए बुलेटप्रूफ सिंटैक्स की घोषणा की । सिंटैक्स कॉम्पैक्ट था और उस समय सभी ब्राउज़रों में मान्य था। हाल ही में, एंड्रॉइड पर लोड करने के लिए फोंट को मना करने की शिकायतें समय के साथ बढ़ने लगी हैं, इसलिए हमने रिचर्ड फिंक द्वारा रचित " मो 'बुलेटप्रूफ " सिंटैक्स की सिफारिश की । दुर्भाग्य से, 'मो' बुलेटप्रूफ सिंटैक्स को दोहरे-लेखन घोषणाओं की आवश्यकता होती है, इसलिए इसका समर्थन करना अधिक जटिल है।

फ़ॉन्ट्स @ फ़ॉन्ट-सिंटैक्स

लेकिन यह कोड शुरुआत से ही ऐसा होना चाहिए। साफ, स्पष्ट और सरल:

@font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); }

क्या? मेरी समझ में नहीं आ रहा है।

~~हैक~~ कोड जो इस कोड को काम करता है, वह है "?" ईओटी फ़ाइल नाम के बाद प्रतीक । कोई मजाक नहीं।

यह कैसे काम करता है

इंटरनेट एक्सप्लोरर (नौवें से पहले के संस्करणों में) src मूल्य हैंडलर में एक बग समाहित करता है। यदि एक से अधिक फ़ॉन्ट प्रारूप src में रखा गया है , तो IE इसे लोड नहीं कर पाएगा और 404 त्रुटि की रिपोर्ट करेगा। इसका कारण यह है कि IE पहली बार खुलने वाली ब्रैकेट के बाद और फ़ाइल के पते के रूप में बहुत अंतिम समापन ब्रैकेट में लिखे गए सभी चीज़ों का उपयोग करने की कोशिश कर रहा है। इस गलत व्यवहार को दूर करने के लिए, केवल EOT को पहले परिभाषित करें और एकल जोड़ें ? ”। यह IE को यह सोचकर चकरा देगा कि शेष पंक्ति एक क्वेरी स्ट्रिंग है और केवल ईओटी फ़ाइल को लोड करेगी। शेष ब्राउज़र सीएसएस विनिर्देश का पालन करेंगे - वे "src" मानों और फ़ॉन्ट प्रारूप निर्देशों के अनुक्रम के आधार पर आवश्यक प्रारूप का चयन करेंगे।

ब्राउज़र संगतता

सफारी 5.03, IE 6-9, फ़ायरफ़ॉक्स 3.6-4, क्रोम 8, आईओएस 3.2-4.2, एंड्रॉइड 2.2-2.3, ओपेरा 11।

"डेटा: ..." पतों में फोंट के बारे में क्या ?

आप सीएसएस शैली में फोंट एम्बेड करने के लिए इस सिंटैक्स का उपयोग कर सकते हैं। हालांकि, इसके लिए काम करने के लिए दो घोषणाओं की जरूरत होगी। यद्यपि, यदि आप पहले से ही इस सड़क को ले गए हैं, तो क्या अतिरिक्त घोषणा का मतलब कम से कम कुछ है? यह भी ध्यान दें कि प्रारूप विनिर्देश "एम्बेडेड- opentype" होना चाहिए।

 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?') format('embedded-opentype'); } @font-face { font-family: 'MyFontFamily'; src: url(data:font/truetype;charset=utf-8;base64,___BASE64) format('truetype'), url(data:font/woff;charset=utf-8;base64,___BASE64) format('woff'), url('myfont-webfont.svg#svgFontName') format('svg'); }

अपडेट 1 - 3 फरवरी, 2011

CSSNinja को इस बात का बहुत अच्छा अंदाजा था कि IE9 को EOT के बजाय WOFF फ़ॉन्ट लेने के लिए कैसे मजबूर किया जा सकता है। उन्होंने EOT प्रारूप में "#" जोड़ने का सुझाव दिया। (यह काम करता है क्योंकि IE9 "# एम्बेडेड- opentype" प्रारूप विनिर्देश को मान्यता नहीं देता है।) इसकी खोज को ध्यान में रखने के लिए, मैंने उपरोक्त सिंटैक्स को बदल दिया है। मैंने ईओट के साथ एम्बेडेड- ऑपेंटाइप प्रारूप के संकेत को प्रतिस्थापित किया , जिसे IE9 भी समझ में नहीं आता है और इसलिए WOFF कहाँ है पर आगे बढ़ता है।

_{अनुवादक का नोट: CSSNinja भी स्थिर नहीं है और प्रविष्टि "प्रारूप ('')" का सुझाव दिया है ।} _{यह दो पात्रों से छोटा है और पॉल आयरिश के प्रति भी उत्सुक है, जिन्होंने पहली बार IE को धोखा देने के लिए प्रवेश "स्थानीय ('')" प्रस्तावित किया था ।}

अपडेट 2 - 4 फरवरी, 2011

जब पृष्ठ स्थानीय रूप से (पाठक की डिस्क से) खुला हो तो IE ने वेब फोंट लोड करने से इनकार कर दिया। यह पता चला है कि IE एक प्रश्न चिह्न ("?" चरित्र) पसंद करता है। इसे समायोजित करने के लिए कोड को संशोधित किया गया है। प्रारंभ में, इस ब्लॉग पोस्ट में मैजिक ग्रिड (प्रतीक "#") की प्रशंसा की गई थी।

नया बुलेटप्रूफ @ फॉन्ट-फेस सिंटेक्स