How to use web fonts

निम्नलिखित ब्रैम स्टीन की वेबफॉन्ट हैंडबुक से लिया गया एक अंश है। यहां खरीदें । [2 9]

वेब फ़ॉन्ट्स के माध्यम से सीएसएस में परिभाषित किया गया है @फॉन्ट फ़ेस शासन। यदि आप एक वेब डेवलपर हैं, तो आप संभवतः लिखित, कॉपी और पेस्ट किए गए हैं, या कम से कम देखा गया है @फॉन्ट फ़ेस शासन। [2 9]

पूर्णता के लिए, हालांकि, चलो एक बुनियादी उदाहरण के माध्यम से जल्दी चलाते हैं: [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  एसआरसी: यूआरएल (ऐलेना-रेगुलर.वॉफ);
} 

यह एक नया वेब फ़ॉन्ट परिवार बनाता है जिसे संदर्भित किया जा सकता है फ़ॉन्ट परिवार या फ़ॉन्ट शॉर्टहैंड संपत्ति। लेकिन यहाँ कुछ गायब है। एक फ़ॉन्ट स्टैक में वेब फ़ॉन्ट का संदर्भ देते समय, वेब फ़ॉन्ट लोड करने में विफल होने पर हमेशा कम से कम एक फॉलबैक फ़ॉन्ट को शामिल करना सुनिश्चित करें। [2 9]

यहां, यदि ऐलेना लोड करने में विफल रहता है, तो ब्राउज़र सामान्य पर वापस आ जाएगा सीरिफ़ फ़ॉन्ट परिवार: [2 9]

 पी {
  फ़ॉन्ट-परिवार: ऐलेना, सेरिफ़;
} 

फॉलबैक फोंट के लिए और भी कुछ है, लेकिन अभी के लिए, आइए हमारे फ़ॉन्ट को केवल जेनेरिक सहित सरल रखें सीरिफ़ तथा सान्स सेरिफ़ फ़ॉन्ट परिवार। [2 9]

फ़ॉन्ट परिवार

कई शैलियों के साथ एक फ़ॉन्ट परिवार बनाना एक बनाकर पूरा किया जाता है @फॉन्ट फ़ेस प्रत्येक शैली के लिए नियम और उसी का उपयोग करना फ़ॉन्ट परिवार नाम। निम्नलिखित @फॉन्ट फ़ेस नियम एक सामान्य और बोल्ड शैली के साथ एक परिवार बनाते हैं: [2 9]

 @ फ़ॉन्ट-फेस {
     फ़ॉन्ट-परिवार: ऐलेना;
     एसआरसी: यूआरएल (ऐलेना-रेगुलर.डोफ);
     फ़ॉन्ट-वजन: सामान्य;
}
   @फॉन्ट फ़ेस {
     फ़ॉन्ट-परिवार: ऐलेना;
     एसआरसी: यूआरएल (ऐलेना-बोल्ड.वॉफ);
     फोंट की मोटाई: बोल्ड;
} 

आप अपने चयनकर्ताओं में परिवार के नाम और वजन का संदर्भ देकर अपने सीएसएस में इस फ़ॉन्ट परिवार का उपयोग कर सकते हैं। यह नियमित शैली को पैराग्राफ और बोल्ड शैली में लागू करता है बलवान पैराग्राफ: [2 9]

 पी {
  फ़ॉन्ट-परिवार: ऐलेना, सेरिफ़;
}

पी मजबूत {
  फोंट की मोटाई: बोल्ड;
} 

इसके आलावा फ़ॉन्ट वजन , @फॉन्ट फ़ेस भी स्वीकार करता है फ़ॉन्ट शैली तथा फ़ॉन्ट-खिंचाव संपत्ति वर्णनकर्ता, जो इटालिक और संघनित शैलियों को परिभाषित करते हैं। सभी तीन संपत्ति डिस्क्रिप्टर का उपयोग कई शैलियों के साथ एक फ़ॉन्ट परिवार बनाने के लिए किया जा सकता है। सैद्धांतिक रूप से, यह आपको 243 व्यक्तिगत शैलियों (नौ) युक्त एक परिवार बनाने देता है फ़ॉन्ट वजन मूल्य × तीन फ़ॉन्ट शैली मूल्यों × नौ फ़ॉन्ट-खिंचाव मान)। [2 9]

अभ्यास में, हालांकि, आप 27 मानों तक सीमित हैं, क्योंकि कुछ ब्राउज़र समर्थन नहीं करते हैं फ़ॉन्ट-खिंचाव । नीचे दी गई तालिका पर एक नज़र डालें ताकि आप किस ब्राउज़र का उपयोग कर सकते हैं, और देखो यहां अधिक विस्तृत जानकारी के लिए। [2 9]

[2 9]

भाग्य के साथ, शेष ब्राउज़र लागू होंगे फ़ॉन्ट-खिंचाव संपत्ति जल्द ही, और आप सभी 243 फ़ॉन्ट वर्गीकरण का उपयोग करने में सक्षम होंगे। [2 9]

फ़ॉन्ट प्रारूप

एसआरसी डिस्क्रिप्टर एक ब्राउज़र बताता है कि फ़ॉन्ट फ़ाइल कहां प्राप्त करें। पिछले उदाहरणों ने एक फ़ॉन्ट प्रारूप का उपयोग किया, लेकिन आप अक्सर प्रारूप संकेतों के साथ संयुक्त फ़ॉन्ट प्रारूपों में यूआरएल देखेंगे, जो यूआरएल के बाद संलग्न होते हैं प्रारूप ("मूल्य") वाक्य - विन्यास। [2 9]

प्रारूप संकेत ब्राउज़र को बताएं कि दिए गए यूआरएल पर फ़ॉन्ट फ़ाइल का प्रारूप क्या है। [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  एसआरसी: यूआरएल (ऐलेना-रेगुलर.डोफ 2) प्रारूप ("WOFF2"),
       यूआरएल (ऐलेना-रेगुलर.वॉफ) प्रारूप ("woff");
} 

यदि आप एकाधिक प्रारूपों को सूचीबद्ध करते हैं, तो आधुनिक ब्राउज़र प्रारूप संकेत के आधार पर समर्थन करने वाले पहले प्रारूप को चुनेंगे। इसलिए, कम से कम सर्वोत्तम संपीड़न के क्रम में वेब फ़ॉन्ट प्रारूपों को सूचीबद्ध करना महत्वपूर्ण है। [2 9]

हालांकि प्रारूप संकेत वैकल्पिक हैं, फिर भी उन्हें शामिल करें - वे ब्राउज़र को फ़ॉन्ट डाउनलोड करने की आवश्यकता के बिना प्रारूप के बारे में बताते हैं। उदाहरण के लिए, यदि कोई ब्राउज़र WOFF2 का समर्थन नहीं करता है, लेकिन समर्थन woff करता है, तो यह प्रारूप संकेत के आधार पर WOFF2 फ़ॉन्ट फ़ाइल को छोड़ सकता है। [2 9]

ब्राउज़र कई वेब फ़ॉन्ट प्रारूपों का समर्थन करते हैं: opentype (truetype), ईओटी, woff, और woff2। कुछ ब्राउज़र भी एसवीजी फोंट का समर्थन करते हैं, लेकिन वे बहिष्कृत हैं और अब इसका उपयोग नहीं किया जाना चाहिए (और इसके साथ भ्रमित नहीं होना चाहिए नया ओपनटाइप-एसवीजी प्रारूप )। [2 9]

ईओटी, woff, और woff2 तकनीकी रूप से फ़ॉन्ट प्रारूप नहीं हैं। वे संपीड़न की विभिन्न डिग्री के साथ संपीड़ित opentype फ़ाइलें हैं। WOFF2 सबसे अच्छा संपीड़न प्रदान करता है, इसके बाद woff और eot। [2 9]

सभी ब्राउज़रों के लिए कवरेज के शोध में, आप किसी चीज़ में आ सकते हैं बुलेटप्रूफ @फॉन्ट फ़ेस वाक्य - विन्यास Fontspring द्वारा। [2 9]

बुलेटप्रूफ सिंटैक्स अधिकतम ब्राउज़र कवरेज के लिए ईओटी, डब्ल्यूओएफएफ 2, डब्ल्यूओएफएफ, रॉ ओफेंटाइप, और एसवीजी फ़ॉन्ट फाइलों का उपयोग करता है: [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  src: url (elena.eot? #iefix) प्रारूप ("एम्बेडेड-ओपनटाइप"),
       यूआरएल (elena.woff2) प्रारूप ("woff2"),
       यूआरएल (elena.woff) प्रारूप ("woff"),
       यूआरएल (elena.otf) प्रारूप ("opentype"),
       यूआरएल (elena.svg # ऐलेना) प्रारूप ("एसवीजी");
} 

पहली यूआरएल लाइन आपको थोड़ा अजीब लग सकती है। इंटरनेट एक्सप्लोरर 8 और नीचे के संस्करण एकाधिक फ़ॉन्ट प्रारूपों के लिए सिंटैक्स का समर्थन नहीं करते हैं, और के पूरे मूल्य का इलाज करते हैं एसआरसी यूआरएल के रूप में संपत्ति। [2 9]

बुलेटप्रूफ सिंटैक्स इंटरनेट एक्सप्लोरर 8 और नीचे यह सोचकर कि शेष यूआरएल पहले यूआरएल के टुकड़े पहचानकर्ता का हिस्सा हैं। चूंकि फाइलों को डाउनलोड करते समय खंड पहचानकर्ताओं को अनदेखा किया जाता है, इंटरनेट एक्सप्लोरर 8 और नीचे बस पहले यूआरएल का उपयोग करें। [2 9]

इंटरनेट एक्सप्लोरर के अलावा अन्य ब्राउज़र लाइन को छोड़ देंगे क्योंकि वे ईओटी का समर्थन नहीं करते हैं। [2 9]

शेष प्रविष्टियां वही हैं जो आप उम्मीद करेंगे: प्राथमिकता के क्रम में सूचीबद्ध फ़ॉन्ट प्रारूप। [2 9]

लेकिन क्या बुलेटप्रूफ सिंटैक्स अभी भी प्रासंगिक है? नहीं, वास्तव में, मुझे लगता है कि यह हानिकारक है। एसवीजी फोंट बहिष्कृत हैं और केवल उन ब्राउज़रों द्वारा समर्थित हैं जो अब उपयोग में नहीं हैं। [2 9]

अधिकांश वेबसाइटें इंटरनेट एक्सप्लोरर 9 और ऊपर का समर्थन करती हैं, फिर भी सिंटैक्स पहले पसंदीदा फ़ॉन्ट प्रारूप के रूप में ईओटी सूचीबद्ध करता है। भले ही इंटरनेट एक्सप्लोरर 9 और ऊपर समर्थन woff, वे संस्करण अभी भी ईओटी फ़ाइल डाउनलोड करेंगे, बस क्योंकि यह पहले सूचीबद्ध है। [2 9]

चूंकि अधिकांश वेबसाइटें अब पुराने ब्राउज़र का समर्थन नहीं करती हैं, इसलिए मैं एक सरलीकृत वाक्यविन्यास का उपयोग करने की अत्यधिक अनुशंसा करता हूं। इस सरलीकृत सिंटैक्स में सभी आधुनिक ब्राउज़रों को शामिल किया गया है, साथ ही थोड़ा पुराने लोग जो अभी भी सक्रिय उपयोग में हैं, जैसे एंड्रॉइड 4.4 और इससे पहले: [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  एसआरसी: यूआरएल (elena.woff2) प्रारूप ("woff2"),
       यूआरएल (elena.woff) प्रारूप ("woff"),
       यूआरएल (elena.otf) प्रारूप ("opentype");
} 

हालांकि पुराने एंड्रॉइड संस्करणों का अभी भी उपयोग किया जाता है, फिर भी इन ब्राउज़रों पर विश्वव्यापी निर्भरता तेजी से घट रही है। जल्द ही आप शायद कच्चे ओपनटाइप प्रारूप को भी छोड़ने में सक्षम होंगे, और सिंटैक्स को और भी सरल बनाएं: [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  एसआरसी: यूआरएल (elena.woff2) प्रारूप ("woff2"),
       यूआरएल (elena.woff) प्रारूप ("woff");
} 

इस मामले में, कोई पुराना ब्राउज़र चलाने वाला कोई व्यक्ति वेब फ़ॉन्ट के बजाय आपके फ़ॉलबैक फोंट को देख सकता है। कोई बात नहीं; वे अभी भी फ़ॉलबैक फ़ॉन्ट में सामग्री को पढ़ सकते हैं। [2 9]

के लिए एक और संभव मूल्य है एसआरसी वर्णनकर्ता। स्थानीय समारोह एक स्थानीय फ़ॉन्ट परिवार का नाम लेता है। यदि फ़ॉन्ट सिस्टम पर स्थापित होने के लिए होता है, तो ब्राउज़र इसके बजाय इसका उपयोग करेगा, जिससे अतिरिक्त डाउनलोड से बचें। [2 9]

 @ फ़ॉन्ट-फेस {
  फ़ॉन्ट-परिवार: ऐलेना;
  एसआरसी: स्थानीय ("ऐलेना"),
       URL (Elena-Regular.Woff2) प्रारूप ("WOFF2"),
       यूआरएल (ऐलेना-रेगुलर.वॉफ) प्रारूप ("woff");
} 

हालांकि यह एक महान अनुकूलन की तरह प्रतीत हो सकता है, कुछ भी गारंटी नहीं देता है कि स्थानीय फ़ॉन्ट आपके वेब फ़ॉन्ट से मेल खाता है। [2 9]

आपको फ़ॉन्ट का एक अलग संस्करण, विभिन्न भाषा समर्थन के साथ एक फ़ॉन्ट, या यहां तक ​​कि एक पूरी तरह से अलग फ़ॉन्ट भी मिल सकता है। इसी कारण से, मैं आमतौर पर उपयोग करने की सलाह नहीं देता स्थानीय तब तक फ़ंक्शन जब तक आप इन डाउनसाइड्स को स्वीकार्य नहीं पाते। [2 9]

यह ब्रैम स्टीन के एक अंश है वेबफॉन्ट हैंडबुक , एक पुस्तक से अलग। इसमें, वह वेब फोंट का चयन करते समय क्या विचार करना है, उन्हें प्रभावी ढंग से उपयोग करने के तरीके और प्रदर्शन के लिए अनुकूलित कैसे करें। [2 9]

संबंधित आलेख: [2 9]

• ब्लॉकचेन क्या है? [21 9]
• वेब डिजाइनरों और देवों के लिए 30 क्रोम एक्सटेंशन [21 9]
• 20 अद्भुत मुफ्त Google वेब फ़ॉन्ट्स [21 9]