वेब पेजों पर कस्टम फ़ॉन्ट्स का उपयोग करना
टेक्स्ट सामग्री हमेशा वेबसाइटों का एक महत्वपूर्ण हिस्सा रहा है, लेकिन वेब के प्रारंभिक दिनों में, डिजाइनरों और डेवलपर्स को उनके वेबपृष्ठों पर टाइपोग्राफिक नियंत्रण में गंभीर रूप से सीमित किया गया था। इसमें फ़ॉन्ट्स में एक सीमा शामिल थी कि वे विश्वसनीय रूप से अपनी साइटों पर उपयोग करने में सक्षम थे। आपने अतीत में वर्णित "वेब सुरक्षित फोंट" शब्द को शायद सुना होगा। इसने फ़ॉन्ट्स के छोटे सेट को संदर्भित किया जो कि किसी व्यक्ति के कंप्यूटर पर शामिल होने की अत्यधिक संभावना थी, जिसका अर्थ है कि यदि आप साइट उन फ़ॉन्ट्स में से किसी एक का उपयोग करते हैं, तो यह एक सुरक्षित शर्त थी कि यह किसी व्यक्ति के ब्राउज़र पर सही ढंग से प्रस्तुत की जाएगी।
आज, वेब पेशेवरों के पास काम करने के लिए कई नए फोंट और प्रकार के विकल्प हैं, जिनमें से एक डब्ल्यूओएफएफ प्रारूप है।
डब्ल्यूओएफएफ क्या है?
डब्ल्यूओएफएफ एक संक्षिप्त शब्द है जो "वेब ओपन फ़ॉन्ट प्रारूप" के लिए खड़ा है। इसका उपयोग सीएसएस @ फ़ॉन्ट-फेस प्रॉपर्टी के उपयोग के लिए फोंट को संपीड़ित करने के लिए किया जाता है। यह वेब पृष्ठों में फोंट एम्बेड करने का एक तरीका है ताकि आप विशिष्ट "एरियल, टाइम्स न्यू रोमन, जॉर्जिया" से परे विशेष फोंट का उपयोग कर सकें - जो कि उपर्युक्त वेब सुरक्षित फ़ॉन्ट्स में से कुछ हैं।
वेब पृष्ठों के लिए पैकेजिंग फोंट के लिए डब्ल्यूओएफएफ को डब्ल्यू 3 सी को मानक के रूप में प्रस्तुत किया गया था। यह 16 नवंबर, 2010 को एक कार्यकारी मसौदा बन गया। आज हमारे पास वास्तव में डब्ल्यूओएफएफ 2.0 है, जो प्रारूप के पहले संस्करण से लगभग 30% तक संपीड़न में सुधार करता है। कुछ मामलों में, ये बचत और भी उपनगरीय हो सकती है!
डब्ल्यूओएफएफ का प्रयोग क्यों करें?
डब्ल्यूओएफएफ प्रारूप के माध्यम से वितरित किए गए वेब फोंट, अन्य फ़ॉन्ट विकल्पों पर बहुत से फायदे प्रदान करते हैं। उन वेब सुरक्षित फ़ॉन्ट्स के रूप में उपयोगी होने के नाते, और निश्चित रूप से अभी भी हमारे काम में उन फ़ॉन्ट्स के लिए एक जगह है, हमारे विकल्पों का विस्तार करना और हमारे टाइपोग्राफिक विकल्पों को खोलना अच्छा है।
डब्ल्यूओएफएफ फोंट के निम्नलिखित लाभ हैं:
- वे छवियों के रूप में फोंट से अधिक सुलभ हैं। डब्ल्यूओएफएफ शैलियों सीएसएस के साथ सादा एचटीएमएल पाठ, आपको अभिगम्यता और डिजाइन नियंत्रण प्रदान करता है कि छवियों की अनुमति नहीं होगी।
- डब्ल्यूओएफएफ फाइलों में टाइपोग्राफिकल सूचना जैसे प्रासंगिक रूप और पुरानी शैली के आंकड़े शामिल हैं। यह आपके वेब पेजों को बेहतर टाइपोग्राफी देता है क्योंकि आप केवल सही अनुमानों का उपयोग नहीं कर रहे हैं।
- डब्ल्यूओएफएफ फोंट अंतर्राष्ट्रीयकरण के साथ मदद कर सकते हैं क्योंकि आप अन्य भाषाओं के पात्रों के साथ फोंट एम्बेड कर सकते हैं।
- सभी सीएसएस स्टाइल टेक्स्ट की तरह, डब्ल्यूओएफएफ के साथ स्टाइल किए गए फोंट अधिक खोज इंजन अनुकूल हैं। खोज इंजन किसी छवि में एम्बेडेड टेक्स्ट "नहीं" देखते हैं, और जब एएलटी टेक्स्ट मदद कर सकता है, तो पाठ के लिए कोई विकल्प नहीं है।
- डब्ल्यूओएफएफ फोंट संकुचित होते हैं, इसलिए वे अन्य प्रकार की फ़ॉन्ट फ़ाइलों से छोटे होते हैं। इससे साइट डाउनलोड की गति और समग्र प्रदर्शन में मदद मिलेगी।
- आप डब्ल्यूओएफएफ फाइलों के रूप में अपने कॉरपोरेट फोंट को एम्बेड करके अपनी ब्रांड पहचान को सुरक्षित रखने के लिए डब्ल्यूओएफएफ फाइलों का उपयोग कर सकते हैं।
डब्ल्यूओएफएफ ब्राउज़र समर्थन
डब्ल्यूओएफएफ के आधुनिक ब्राउज़र में उत्कृष्ट ब्राउज़र समर्थन है, जिसमें निम्न शामिल हैं:
- क्रोम 6+
- फ़ायरफ़ॉक्स 3.6+
- इंटरनेट एक्सप्लोरर 9 +
- ओपेरा 11.1+
- सफारी 5.1+
इन दिनों बोर्ड में यह अनिवार्य रूप से समर्थित है, एकमात्र अपवाद ओपेरा मिनी के सभी संस्करणों के साथ है।
WOFF फ़ॉन्ट्स का उपयोग कैसे करें
WOFF फ़ाइल का उपयोग करने के लिए, आपको अपने वेब सर्वर पर एक WOFF फ़ाइल अपलोड करने की आवश्यकता है, इसे @ font-face प्रॉपर्टी के साथ एक नाम दें, और उसके बाद फ़ॉन्ट को अपने सीएसएस में कॉल करें। उदाहरण के लिए:
- वेब सर्वर की / fonts निर्देशिका में myWoffFont.woff नामक फ़ॉन्ट अपलोड करें।
- अपनी सीएसएस फ़ाइल में एक @ फ़ॉन्ट-फेस अनुभाग जोड़ें:
@फॉन्ट फ़ेस {
फ़ॉन्ट-फ़ैमिली: myWoffFont;
src: url ('/ fonts / myWoffFont.woff') प्रारूप ('woff');
}
- अपने फ़ॉन्ट फ़ॉन्ट स्टैक पर नया फ़ॉन्ट नाम (myWoffFont) जोड़ें, जैसे कि आप कोई अन्य फ़ॉन्ट नाम करेंगे:
पी {
फ़ॉन्ट-फ़ैमिली: माईवॉफफॉन्ट , जेनेवा, एरियल, हेल्वेटिका, सैन्स-सेरिफ़;
}
डब्ल्यूओएफएफ फ़ॉन्ट्स कहां प्राप्त करें
दो महान स्थान हैं जहां आप बहुत से डब्ल्यूओएफएफ फ़ॉन्ट्स पा सकते हैं जो वाणिज्यिक और गैर-वाणिज्यिक उपयोग के लिए स्वतंत्र हैं:
- ओपन फ़ॉन्ट लाइब्रेरी
- फ़ॉन्ट गिलहरी
यदि आपके पास एक ऐसे फ़ॉन्ट का उपयोग करने का लाइसेंस है जो WOFF प्रारूप में उपलब्ध नहीं है, तो आप अपनी फ़ॉन्ट फ़ाइलों को WOFF फ़ाइलों में परिवर्तित करने के लिए फ़ॉन्ट गिलहरी पर WOFF निर्माता का उपयोग कर सकते हैं। Sfnt2woff नामक एक कमांड लाइन उपकरण भी है जिसे आप मैकंटोश और विंडोज पर अपने ट्रू टाइप / ओपन टाइप फ़ॉन्ट्स को WOFF में परिवर्तित करने के लिए उपयोग कर सकते हैं।
अपने सिस्टम के लिए उपयुक्त द्विआधारी डाउनलोड करें और इसे कमांड लाइन (या टर्मिनल) पर चलाएं और निर्देशों का पालन करें।
डब्ल्यूओएफएफ उदाहरण
WOFF फ़ाइलों के कुछ उदाहरण यहां दिए गए हैं: 24 घंटे में HTML5 पर WOFF पृष्ठ।
जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 7/11/17 को संपादित किया गया