वेब फोंट के साथ बेहतर और तेज यूआई आइकन के लिए एक गाइड

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

यदि हमारे पास किसी वेबसाइट में डालने के लिए बहुत सारे आइकन हैं, तो यह संभावित रूप से वेबसाइट के प्रदर्शन को धीमा कर देगा क्योंकि कई HTTP अनुरोधों को ब्राउज़र द्वारा संचालित किया जाना है। यद्यपि यह समस्या सीएसएस स्प्राइट के साथ हल की जा सकती है, लेकिन फ़ाइल का आकार अभी भी बड़ा है.

बिटमैप आइकन में लचीलापन और मापनीयता में भी कमियां हैं; मान लें कि हमें आइकन को एक निश्चित स्तर तक बढ़ाने या ज़ूम करने की आवश्यकता है, या इसे बहुत ही उच्च स्क्रीन रिज़ॉल्यूशन के माध्यम से देखें जैसे कि रेटिना डिस्प्ले; आइकन निश्चित रूप से होगा धुंधली दिख रही है.

ठीक है, यदि आप उन मामलों में से कुछ को ध्यान में रखते हैं, तो आपको संभवतः आइकन फोंट का उपयोग करने की आवश्यकता है.

आइकन फ़ॉन्ट्स का उपयोग करना

एक आइकन फ़ॉन्ट एक वेब फ़ॉन्ट में पैक किए गए माउस का एक सेट है जिसे बाद में उपयोग करके वेबसाइट पर एम्बेड किया जा सकता है @फॉन्ट फ़ेस. जैसा कि सीएसएस पर क्रिस ने बताया है कि आइकनों को वितरित करने के लिए छवि पर फ़ॉन्ट का उपयोग करने के कई लाभ हैं;

फ़ॉन्ट एक वेक्टर-आधारित वस्तु है, जो अपनी प्रकृति से, संकल्प-स्वतंत्र है, इसलिए आइकन विभिन्न स्क्रीन रिज़ॉल्यूशन में बहुत ही उच्च स्क्रीन रिज़ॉल्यूशन (जैसे रेटिना-स्तर) सहित कुरकुरा रहेगा.
यह स्केलेबल भी है, जिससे गुणवत्ता और परिशुद्धता खोए बिना इसे कई स्तरों पर बढ़ाया जा सकता है.
चूंकि आइकन मूल रूप से एक फ़ॉन्ट है, हम रंग, पारदर्शिता, पाठ-छाया को भी नियंत्रित कर सकते हैं और यहां तक कि स्टाइल शीट के माध्यम से इसका आकार भी बदल सकते हैं
हम CSS3 के साथ आइकन को भी चेतन कर सकते हैं.
आइकन को इसके साथ बुलाया जाता है @फॉन्ट फ़ेस नियम जो इंटरनेट एक्सप्लोरर 4 (.eot के साथ) के रूप में जल्दी से समर्थित किया गया है.
कम HTTP अनुरोध और कम फ़ाइल आकार.

यहाँ कुछ सर्वश्रेष्ठ मुफ्त आइकन फोंट हैं जिन्हें हम पा सकते हैं:

बहुत बढ़िया फ़ॉन्ट
IcoMoon
सोशल मीडिया आइकॉन
Zurb फाउंडेशन प्रतीक

सुनिश्चित करें कि आपने लेखक के समय और कड़ी मेहनत को सम्मानित करने के लिए अपनी वेबसाइट में एम्बेड करने से पहले लाइसेंस की जाँच की है और उसका पालन किया है.

@ फ़ॉन्ट-चेहरा नियम

जैसा कि हमने उल्लेख किया है, आइकन का उपयोग करके एम्बेडेड किया गया है @फॉन्ट फ़ेस स्टाइल शीट के माध्यम से नियम जो नए को परिभाषित करते हैं फ़ॉन्ट परिवार. निम्नलिखित उदाहरण में हम वेब प्रतीकों का उपयोग करेंगे;

 @ फ़ॉन्ट-चेहरा फ़ॉन्ट-परिवार: 'WebSymbolsRegular'; src: url ('फोंट / वेब्सबॉम्बल्स-रेगुलर-वेबफोंट.ऑट'); : ('फोंट / वेब्समबल्स-रेगुलर-वेबफोंट.टीएफ') फॉर्मेट ('ट्रेटाइप'), यूआरएल ('फॉन्ट्स / वेब्सइमबॉल्स-रेगुलर-वेबफॉन्ट.एसवीजी # वेबस्माइब्रेट्रीगुलर') फॉर्मेट ('svg');

फिर, HTML दस्तावेज़ में, हमें केवल उन पात्रों को जोड़ना होगा जो आइकन का प्रतिनिधित्व करते हैं, और नए को लागू करने के बजाय फ़ॉन्ट परिवार दस्तावेज़ में व्यापक रूप से, हम विशेष रूप से कुछ तत्वों में एक अतिरिक्त वर्ग जोड़कर कर सकते हैं जो आइकन को प्रदान करने की आवश्यकता है, जैसे;

  ज
 मैं
 j
 ए
 मैं

स्टाइल शीट पर वापस, हम नए को परिभाषित करते हैं फ़ॉन्ट परिवार उस वर्ग के लिए जिसे हमने अभी जोड़ा है:

 .icon-font font-family: WebSymbolsRegular; फ़ॉन्ट-आकार: 12pt;

डेमो @ फ़ॉन्ट-चेहरा

छद्म तत्वों का उपयोग करना

अगर आइकन को साइड एलिमेंट माना जाता है, तो हम आइकन को डिलीवर भी कर सकते हैं छद्म तत्व. यह मानते हुए कि हमारा HTML मार्कअप निम्नानुसार है:

  जवाब दे दो
 सभी को उत्तर दें
 आगे
 आसक्ति
 छवि

हम इसे स्टाइल शीट में इस तरह से कर सकते हैं:

 ul.icon-font.pseudo li: इससे पहले font-family: WebSymbolsRegular; मार्जिन-राइट: 5 पीएक्स;  ul.icon-font.pseudo li: nth-child (1): content: "h" से पहले;  ul.icon-font.pseudo li: nth-child (2): content: "i" से पहले;  ul.icon-font.pseudo li: nth-child (3): content: "j" से पहले;  ul.icon-font.pseudo li: nth-child (4): इससे पहले content: "A";  ul.icon-font.pseudo li: nth-child (5): इससे पहले content: "I";

डेमो छद्म तत्व

निजी उपयोग यूनिकोड

एक ऐसी परिस्थिति है जहां आइकन अक्षरों (ए, बी, सी, डी, आदि) में एम्बेडेड नहीं थे, लेकिन पात्रों के बीच टकराव को कम करने के लिए यूनिकोड प्राइवेट यूज़ में एम्बेड किए गए थे। जैसे FontAwesome में, लेखक ने सौभाग्य से स्टाइल शीट में सभी वर्ण कोड जोड़े हैं, जो इस तरह दिखता है;

 .आइकन-ग्लास: सामग्री से पहले: "\ f0c6";

लेकिन जब हमें आइकन को सीधे HTML में एम्बेड करने की आवश्यकता होती है, तो निम्न कोड जैसा कुछ \ f0c6 इंगित किए गए आइकन को रेंडर नहीं करेगा, क्योंकि यह HTML में एन्कोडेड एक मान्य वर्ण नहीं है.

HTML को संख्यात्मक संदर्भ मार्कअप की आवश्यकता है विशेष पात्रों को प्रस्तुत करना। हमने CSS3 बटन पर अपने पिछले ट्यूटोरियल में इसके बारे में थोड़ा सा कवर किया है; इस चरित्र को एक एम्परसेंड चिन्ह के संयोजन के साथ उपसर्ग किया गया है (और), हैश साइन (#) और एक एक्स उसके बाद हेक्साडेसिमल संख्या जो चरित्र का प्रतिनिधित्व करती है.

उदाहरण के लिए, f0c6 एक हेक्साडेसिमल संख्या है, इसलिए HTML में संख्यात्मक वर्ण संदर्भ होगा & # Xf0c6;, फ़ॉन्ट में वह कोड प्रदर्शित करेगा पेपर क्लिप आइकन, इस तरह;

डेमो यूनिकोड

फ़ॉन्ट सबसेटिंग

संग्रह में प्रतीक सभी की जरूरत नहीं हो सकता है। उस स्थिति में, हम उपयोग किए गए फ़ॉन्ट को हटाकर अप्रयुक्त वर्णों को छोड़ सकते हैं कम फ़ॉन्ट फ़ाइल आकार में परिणाम. सौभाग्य से, इस काम को आसानी से करने के लिए FontSquirrel से एक आसान उपकरण है, @ फ़ॉन्ट-फेस जनरेटर.

आपके द्वारा उस पृष्ठ पर जाने और फ़ॉन्ट जोड़ने के बाद, चयन करें विशेषज्ञ. आपको कुछ और विकल्प दिखाई देंगे; चुनते हैं कस्टम सबसेटिंग.

इस उदाहरण में, हम अपनी वेबसाइट में सोशल मीडिया आइकन प्रदर्शित करने के लिए सोशोलिको फ़ॉन्ट का उपयोग करते हैं, लेकिन हमें जिन आइकनों की आवश्यकता होगी वे केवल ड्रिबल, फेसबुक और ट्विटर हैं जो क्रमशः इन पात्रों द्वारा दर्शाए जाते हैं; डी, एफ तथा टी. इसलिए, उन वर्णों को एकल वर्ण इनपुट फ़ील्ड में निम्नानुसार रखें:

और हम कर रहे हैं। अब हम फ़ॉन्ट डाउनलोड कर सकते हैं और मेरे मामले में फ़ॉन्ट का आकार केवल 3Kb से 5Kb हो गया है। यह भी याद रखें कि केवल वही पात्र एक आइकन में प्रदान किया जाएगा केवल डी, एफ और टी हैं, जबकि अन्य वर्ण केवल एक नियमित पत्र होंगे.

फाइनल थॉट

एक चीज जो हम इस प्रथा पर नहीं कर सकते हैं वह है आइकॉन की तरह अत्यधिक विस्तृत प्रभाव.

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

अंत में, यदि आप इस विषय में गहराई से उतरना चाहते हैं, तो नीचे हमने कुछ उपयोगी संदर्भों के साथ-साथ हमारे डेमो और स्रोत कोड को डाउनलोड के लिए रखा है।.

कैसे अपनी खुद की आइकन बनाने के लिए Webfont - WebDesignerDepot.com
फ़ॉन्ट और डेटा विशेषताएँ प्रदर्शित करना - 24Ways
निजी उपयोग यूनिकोड - विकिपीडिया

डेमो
स्रोत डाउनलोड करें