@ फॉन्ट-फेस का उपयोग करना - सीएसएस-ट्रिक्स

@font-faceनियम कस्टम फोंट एक वेब पेज पर लोड करने के लिए अनुमति देता है। एक बार एक स्टाइलशीट में जोड़े जाने के बाद, नियम ब्राउज़र को निर्देश देता है कि वह जहां फ़ॉन्ट होस्ट किया गया है, वहां से डाउनलोड करें, फिर उसे सीएसएस में निर्दिष्ट के रूप में प्रदर्शित करें।

नियम के बिना, हमारे डिजाइन फोंट तक सीमित हैं जो पहले से ही उपयोगकर्ता के कंप्यूटर पर लोड किए गए हैं, जो कि उपयोग किए जा रहे सिस्टम के आधार पर भिन्न होता है। यहां मौजूदा सिस्टम फोंट का अच्छा ब्रेकडाउन है।

गहन संभव ब्राउज़र समर्थन

यह इस पद्धति का सबसे गहरा समर्थन संभव है। @font-faceनियम किसी भी शैली से पहले स्टाइलशीट में जोड़ा जाना चाहिए।

@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )

फिर इसका उपयोग इस तरह के स्टाइल तत्वों के लिए करें:

body ( font-family: 'MyWebFont', Fallback, sans-serif; )

ब्राउज़र समर्थन का व्यावहारिक स्तर

चीजें बहुत तेजी से WOFF और WOFF 2 की ओर बढ़ रही हैं, इसलिए हम शायद इससे दूर हो सकते हैं:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
5+	5.1+ है	3.6+ है	11.50+	9+	4.4+ है	5.1+ है

थोड़ा गहरा ब्राउज़र समर्थन

यदि आपको पूर्ण समर्थन और व्यावहारिक समर्थन के बीच एक खुशहाल माध्यम की आवश्यकता है, तो यह कुछ और आधारों को कवर करेगा:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
3.5+ है	3+	3.5+ है	10.1+	9+	२.२+	4.3+ है

सुपर प्रगतिशील ब्राउज़र समर्थन

यदि हम WOFF पर खेत को रोक रहे हैं, तो हम कुछ समय में WOFF2 की ओर चीजों को स्थानांतरित करने की उम्मीद कर सकते हैं। इसका मतलब है कि हम खून बह रहा किनारे पर रह सकते हैं:

@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
36+ है	नहीं न	झंडे के साथ 35+	23+	नहीं न	३।	नहीं न

वैकल्पिक तकनीक

@import

जबकि @font-faceहमारे स्वयं के सर्वर पर होस्ट किए जाने वाले फोंट के लिए उत्कृष्ट है, ऐसी परिस्थितियां हो सकती हैं जहां होस्ट किया गया फ़ॉन्ट समाधान बेहतर है। Google फ़ॉन्ट्स इसे अपने फोंट का उपयोग करने के तरीके के रूप में प्रदान करता है। @importGoogle Sans से Open Sans फ़ॉन्ट लोड करने के लिए निम्नलिखित का उपयोग करने का एक उदाहरण है :

@import url(//fonts.googleapis.com/css?family=Open+Sans);

फिर हम इसे शैली तत्वों में उपयोग कर सकते हैं:

body ( font-family: 'Open Sans', sans-serif; )

यदि आप फ़ॉन्ट के लिए URL खोलते हैं, तो आप वास्तव @font-faceमें पर्दे के पीछे किए जा रहे सभी काम देख सकते हैं ।

एक होस्ट की गई सेवा का उपयोग करने का एक लाभ यह है कि इसमें सभी फ़ॉन्ट फ़ाइल विविधताएं शामिल होने की संभावना है, जो उन सभी फ़ाइलों को होस्ट किए बिना गहरी क्रॉस-ब्राउज़र संगतता सुनिश्चित करता है।

CodePen पर CSS- ट्रिक्स (@ css-tricks) द्वारा कस्टम फोंट के लिए @import का उपयोग करके पेन देखें।

एक स्टाइलशीट आईएनजी

इसी तरह, आप उसी संपत्ति से लिंक कर सकते हैं, जैसा कि आप सीएसएस के बजाय HTML दस्तावेज़ में किसी अन्य सीएसएस फ़ाइल से करेंगे । Google फ़ॉन्ट्स से एक ही उदाहरण का उपयोग करना, यह वह है जो हम उपयोग करेंगे:

फिर, हम अपने तत्वों को अन्य तरीकों की तरह स्टाइल कर सकते हैं:

body ( font-family: 'Open Sans', sans-serif; )

फिर, यह @font-faceनियमों को आयात कर रहा है, लेकिन, उन्हें हमारी स्टाइलशीट में इंजेक्ट करने के बजाय, उन्हें हमारे HTML में जोड़ा जाता है।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा कस्टम फोंट के लिए पेन का उपयोग करना देखें।

यह एक ही बात के बारे में है ... दोनों तकनीकों को आवश्यक संपत्ति डाउनलोड करें।

फ़ॉन्ट फ़ाइल प्रकार को समझना

इस पोस्ट के शीर्ष पर मूल स्निपेट अजीब एक्सटेंशन वाली बहुत सारी फ़ाइलों का संदर्भ देता है। आइए प्रत्येक एक पर जाएं और उनके बारे में बेहतर समझ प्राप्त करें।

WOFF / WOFF2

के लिए खड़ा है: वेब ओपन फ़ॉन्ट प्रारूप।

वेब पर उपयोग के लिए बनाया गया है, और मोज़िला द्वारा अन्य संगठनों के साथ मिलकर विकसित किया गया है, WOFF फोंट अक्सर अन्य प्रारूपों की तुलना में तेजी से लोड होते हैं क्योंकि वे OpenType (OTF) और ट्रू टाइप (TTF) फोंट द्वारा उपयोग किए गए संरचना के संकुचित संस्करण का उपयोग करते हैं। इस प्रारूप में फ़ॉन्ट फ़ाइल के भीतर मेटाडेटा और लाइसेंस जानकारी भी शामिल हो सकती है। यह प्रारूप विजेता लगता है और जहां सभी ब्राउज़रों का नेतृत्व किया जाता है।

WOFF2, WOFF की अगली पीढ़ी है और मूल की तुलना में बेहतर संपीड़न का दावा करता है।

एसवीजी / एसवीजीजेड

के लिए खड़ा है: स्केलेबल वेक्टर ग्राफिक्स (फ़ॉन्ट)

एसवीजी फ़ॉन्ट का एक वेक्टर पुन: निर्माण है, जो इसे फ़ाइल आकार में बहुत हल्का बनाता है, और यह मोबाइल उपयोग के लिए भी आदर्श बनाता है। यह प्रारूप केवल संस्करण 4.1 और आईओएस के लिए सफारी के नीचे की अनुमति है। SVG फोंट वर्तमान में फ़ायरफ़ॉक्स, IE या IE मोबाइल द्वारा समर्थित नहीं हैं। फ़ायरफ़ॉक्स ने WOFF पर ध्यान केंद्रित करने के लिए अनिश्चित काल के लिए कार्यान्वयन को स्थगित कर दिया है।

SVGZ, SVG का ज़िपित संस्करण है।

ईओटी

के लिए खड़ा है: एंबेडेड ओपन टाइप।

यह प्रारूप Microsoft (मूल इनोवेटर्स @font-face) द्वारा बनाया गया था और यह केवल IE द्वारा समर्थित एक मालिकाना फ़ाइल मानक है। वास्तव में, यह एकमात्र प्रारूप है जिसका उपयोग करते समय IE8 और नीचे की पहचान होगी @font-face।

OTF / TTF

के लिए खड़ा है: ओपन टाइप फ़ॉन्ट और ट्रू टाइप फ़ॉन्ट।

WOFF प्रारूप शुरू में OTF और TTF के लिए एक प्रतिक्रिया के रूप में बनाया गया था, क्योंकि इन स्वरूपों को आसानी से (और अवैध रूप से) कॉपी किया जा सकता है, हालाँकि, OpenType में ऐसी क्षमताएं हैं कि कई डिज़ाइनर (ligatures और ऐसे) में रुचि ले सकते हैं।

प्रदर्शन पर एक नोट

वेब फोंट डिजाइन के लिए बहुत अच्छे हैं, लेकिन वेब प्रदर्शन पर उनके प्रभाव को समझना भी महत्वपूर्ण है। कस्टम फोंट अक्सर साइटों को एक प्रदर्शन हिट लेने का कारण बनाते हैं क्योंकि फॉन्ट को प्रदर्शित होने से पहले डाउनलोड किया जाना चाहिए।

एक सामान्य लक्षण एक संक्षिप्त क्षण हुआ करता था जहां फोंट पहले फॉलबैक के रूप में लोड होते हैं, फिर डाउनलोड किए गए फॉन्ट को ब्लिंक करते हैं। पॉल आयरिश का इस पर एक पुराना पोस्ट है (डब किया हुआ "फ़्यूज़": फ्लैश ऑफ़ अनस्टल्ड टेक्स्ट)।

इन दिनों, ब्राउज़र आम तौर पर डिफ़ॉल्ट रूप से कस्टम फ़ॉन्ट लोड होने से पहले पाठ छिपा रहे हैं। बेहतर या खराब? आप तय करें। आप विभिन्न तकनीकों के माध्यम से इस पर कुछ नियंत्रण कर सकते हैं। इस लेख के लिए थोड़ा बाहर की गुंजाइश है, लेकिन यहाँ Zach Leatherman द्वारा लेख की एक ट्रिफ़ेक्टा प्राप्त करने के लिए आप खरगोश छेद नीचे शुरू कर रहे हैं:

• फ़ॉन्ट लोड घटनाओं के साथ बेहतर @ फ़ॉन्ट-चेहरा
• हम @ फॉन्ट-फेस-पॉम से बचकर जिम्मेदारी से वेब फॉन्ट का उपयोग कैसे करते हैं
• फॉक्स टेक्स्ट का फ्लैश अभी भी फ़ॉन्ट लोड हो रहा है

यहां कस्टम फोंट लागू करते समय कुछ और विचार दिए गए हैं:

फ़ाइल का आकार देखें

फ़ॉन्ट आश्चर्यजनक रूप से भारी हो सकते हैं, इसलिए लाइटर संस्करणों की पेशकश करने वाले विकल्पों की ओर झुकाव करें। उदाहरण के लिए, एक फ़ॉन्ट सेट का पक्ष लें जो 50KB बनाम एक है जिसका वजन 400KB है।

यदि संभव हो तो चरित्र सेट को सीमित करें

क्या आपको वास्तव में एक फ़ॉन्ट के लिए बोल्ड और ब्लैक वेट की आवश्यकता है? अपने फॉन्ट सेट्स को केवल वही लोड करने के लिए सीमित करें जो कि उपयोग किया जाता है एक अच्छा विचार है और यहाँ पर कुछ अच्छे सुझाव हैं।

छोटे स्क्रीन के लिए सिस्टम फोंट पर विचार करें

कई डिवाइस गंदे कनेक्शन पर अटके हुए हैं। एक चाल बड़ी स्क्रीन को लक्षित करने के लिए हो सकती है जब कस्टम फ़ॉन्ट का उपयोग करके लोड हो रहा हो @media।

इस उदाहरण में, 1000px से छोटी स्क्रीन को इसके बजाय एक सिस्टम फ़ॉन्ट दिया जाएगा और चौड़ी और ऊपर की स्क्रीन को कस्टम फ़ॉन्ट प्रदान किया जाएगा।

@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )

फ़ॉन्ट सेवाएँ

ऐसी कई सेवाएँ हैं जो फॉन्ट की मेजबानी करेंगी और व्यावसायिक रूप से लाइसेंस प्राप्त फोंट तक भी पहुँच प्रदान करेंगी। एक सेवा का उपयोग करने के लाभ अक्सर कुशलतापूर्वक वितरित किए गए कानूनी फोंट के एक बड़े चयन के लिए उबलते हैं (उदाहरण के लिए एक तेजी से सीडीएन पर उनकी सेवा करना)।

यहाँ कुछ होस्ट किए गए फ़ॉन्ट सेवाएं हैं:

• क्लाउड टाइपोग्राफी
• बहुत बढ़िया
• Fontdeck
• वेबटाइप
• फाँसने की क्रिया
• टंकण
• फ़ॉन्ट्स। Com
• Google फ़ॉन्ट्स
• फ़ॉन्ट गिलहरी

आइकन फ़ॉन्ट्स के बारे में क्या?

यह सच है, @ फॉन्ट-फेस आइकॉन से भरी एक फॉन्ट फाइल को लोड कर सकता है, जिसका इस्तेमाल आइकन सिस्टम के लिए किया जा सकता है। हालाँकि, मुझे लगता है कि आप एसवीजी का उपयोग आइकन सिस्टम के रूप में करना बेहतर समझते हैं। यहाँ दो तरीकों की तुलना है।

और अधिक संसाधनों

• Google फ़ॉन्ट API की मूल बातें
• सीएसएस फ़ॉन्ट परिवारों