फ़ॉन्ट आइकन बनाम पीएनजी आइकन

Question

मैं लेबल के लिए आइकन का उपयोग करता हूं, लेकिन मैंने यह वेबसाइट देखी: www.fontello.com जहां आप आइकन के साथ फ़ॉन्ट बना सकते हैं।

लेकिन जब मैं आइकन के साथ फ़ॉन्ट बनाता हूं तो यह मेरे सभी आइकनों से बड़ा होता है, क्योंकि वहां svg, ttf, woff और eot है, सभी 4 फोंट बड़े हैं जो सभी पीएनजी आइकन हैं।

@font-face { 
    font-family: 'fonticons'; 
    src: url("../font/fonticons.eot"); 
    src: url("../font/fonticons.eot?#iefix") format('embedded-opentype'), url("../font/fonticons.woff") format('woff'), url("../font/fonticons.ttf") format('truetype'), url("../font/fonticons.svg#fonticons") format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

मेरे सभी आइकन संपीड़ित .png छवियों को ऑप्टिप कर रहे हैं।

क्या यह सभी ब्राउज़रों पर काम करता है?

तो मुझे इस फ़ॉन्ट विधि का उपयोग क्यों करना चाहिए?

और fontello.com के लिए कोई विकल्प?

Answer 1

अच्छा सवाल। मैं वर्तमान में Fontello और फ़ॉन्ट आइकन के साथ प्रयोग कर रहा हूं यह देखने के लिए कि यह एक व्यवहार्य दृष्टिकोण है या नहीं।

यह एक व्यवहार्य दृष्टिकोण है। मैंने उत्पादन अनुप्रयोगों में फ़ॉन्ट-आधारित आइकनों का उपयोग किया है और लगभग हर लोकप्रिय ब्राउज़र/डिवाइस पर परीक्षण किया है (Fontello के उदाहरण हैं जो आईई 7 का भी समर्थन करते हैं)। मेरे पास Fontello के बारे में कहने के लिए केवल अच्छी चीजें हैं, लेकिन आप जो भी उपकरण चाहते हैं उसका उपयोग कर सकते हैं।

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

आप एक ही फ़ाइल (जैसे स्प्राइट) में सभी आइकनों को परिभाषित कर सकते हैं, लेकिन एक स्प्राइट के विपरीत आपको फ़ाइल के भीतर आइटम के आयामों के बारे में चिंता करने की ज़रूरत नहीं है। इसके अलावा, आप फ़ाइल में अन्य वस्तुओं से स्वतंत्र प्रत्येक आइटम को स्केल कर सकते हैं।

विचार

• आप फ़ॉन्ट फ़ाइल का प्रबंधन करने की आवश्यकता होगी। ये मानव-पठनीय नहीं हैं, इसलिए आपको एक उपकरण का उपयोग करने की आवश्यकता होगी।
• बनाए रखने के लिए सीएसएस चयनकर्ता जुड़े हैं (आमतौर पर प्रति आइकन एक चयनकर्ता)।
• किसी विशेष प्रभाव को प्राप्त करने/किसी समस्या को ठीक करने के लिए कभी-कभी अतिरिक्त मार्कअप की आवश्यकता होती है।
• मामूली आकार के मुद्दों; सभी आइकन एक बॉक्स को समान रूप से भरते नहीं हैं और वे प्रत्येक ब्राउज़र के टेक्स्ट प्रतिपादन idiosyncrasies के अधीन हैं।

ये विचार शायद स्प्राइट्स का उपयोग करने या प्रत्येक आइकन के लिए पीएनजी/एसवीजी दोनों बनाने से कम काम हैं।

ध्यान रखें कि एक फ़ॉन्ट आइकन में कोई रंग जानकारी नहीं है। हालांकि, आप इसे किसी भी अन्य पाठ के रूप में स्टाइल कर सकते हैं।इसमें एआरजीबी रंगों का उपयोग करना और टिप्पणियों में उल्लिखित अधिक उन्नत सीएसएस प्रभाव लागू करना शामिल है।

फ़ाइल आकार के संबंध में, ध्यान रखें कि ब्राउज़र लगभग 4 फ़ॉन्ट प्रारूपों को डाउनलोड नहीं करेगा। सही ढंग से हो गया, आमतौर पर केवल एक ही डाउनलोड किया जाएगा।

आइकन के लिए एसवीजी (एसवीजी फोंट नहीं) का उपयोग करने का एक वैकल्पिक दृष्टिकोण है। एसवीजी के लिए ब्राउज़र समर्थन @font-face से कम है, इसलिए आपको रास्टर फ़ॉलबैक की आवश्यकता होगी।

Answer 2

यह आसान साइट आपको सीएसएस सुविधाओं के साथ दिखाती है जो ब्राउज़र द्वारा समर्थित हैं। इस मामले में < आईई 9 आपको समस्याएं दे सकता है।

http://caniuse.com/#feat=fontface

व्यक्तिगत रूप से, मैं अपने UI तत्व के लिए CSS स्प्राइट का उपयोग करने के ब्राउज़रों acroass स्थिरता सुनिश्चित करने के लिए पसंद करते हैं।

Answer 3

त्वरित अस्वीकरण: मैं pictonic नामक एक आइकन फ़ॉन्ट लाइब्रेरी पर काम कर रहा हूं।

जब मैं माउस के साथ फ़ॉन्ट बनाने यह मेरे सभी चिह्न से बड़ा है, क्योंकि वहाँ svg, ttf, WOFF और EOT, कि सभी 4 फोंट बड़ा कि सभी png प्रतीक हैं।

फ़ाइल आकार के संदर्भ में, आप PNG का के निम्नलिखित तुलना बनाम आइकन दिलचस्प फोंट मिल सकती है:

http://blog.pictonic.co/post/32260064131/icon-fonts-could-speed-up-your-page-loading-time-by-14

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

मेरे अनुभव में, यहां तक ​​कि 16x16px पर, एक टीटीएफ फ़ॉन्ट 20 या तो आइकन के संयुक्त फाइलसाइज से बहुत छोटा होना चाहिए। क्योंकि छवि का आकार बढ़ता है, यह अंतर बढ़ता है क्योंकि वैक्टरों के पास प्रत्येक पैमाने पर एक ही फाइलसाइज होता है।

क्या यह सभी ब्राउज़रों पर काम करता है?

आपके द्वारा उपयोग की जाने वाली विधियों पर निर्भर करता है। चित्रकार का परीक्षण सभी ब्राउज़रों पर यानी 5 पर किया जाता है लेकिन पुरानी यानी संस्करणों (5-7) के लिए थोड़ी सी जेएस की आवश्यकता होती है। तो सिद्धांत रूप में सभी ब्राउज़रों में काम कर रहे आइकन फोंट प्राप्त करना संभव है।

तो मुझे इस फ़ॉन्ट विधि का उपयोग क्यों करना चाहिए?

आइकन फोंट वास्तव में बहुमुखी हैं, आप उन तरीकों से सीएसएस के साथ छेड़छाड़ कर सकते हैं जो छवि आइकन को काफी लचीला लगते हैं। यहां एक डेमो है: https://pictonic.co/#main-demo

तो उदाहरण के लिए, आप अपने लेआउट के साथ प्रयोग कर सकते हैं और सीएसएस की कुछ पंक्तियों के साथ अपने सभी आइकनों के रंग, आकार और छाया को बदल सकते हैं। यह बहुत आसान है।

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

मुझे विश्वास है कि यदि आप सही प्रारूप का उपयोग करते हैं तो वे बहुत कुशल हैं।

और fontello.com के लिए कोई विकल्प?

pictonic अभी तक उपयोगकर्ता उत्पन्न प्रतीक आयात करने की क्षमता नहीं है, लेकिन यह आप एक काफी बड़े मुक्त iconset सहित 2000 से अधिक तेजस्वी प्रतीक, से कस्टम आइकन फोंट उत्पन्न करने के लिए अनुमति नहीं है। और हम हमेशा अधिक जोड़ रहे हैं, तो have a look

Answer 4

करना आप के लिए एक अन्य विकल्प हो सकता है: http://fontastic.me/

;)

Answer 5

आप फ़ॉन्ट फ़ाइल शामिल फ़ॉन्ट प्रतीक है कि विस्तार के हैं
1. .woff , .ttf, .eot, .svg और उस फ़ॉन्ट के लिए css फ़ाइल। वे आकार में कम हैं और जब आवश्यक हो तो आप आइकन के आकार को बदल सकते हैं, छवि फ़ाइलों के साथ png/jpeg यह छवि फ़ाइल को विकृत करता है, जहां फ़ॉन्ट आइकन ठीक से स्केल करते हैं।
2. एकाधिक छवियों के साथ आपको सर्वर पर एकाधिक http अनुरोध करना होगा, जिसे यहां से बचा जा सकता है।
3. फ़ॉन्ट आइकन फ़ाइलें सीडीएन पर भी उपलब्ध हैं इसलिए आपको सर्वर से अनुरोध करने की आवश्यकता नहीं है अगर कुछ पहले की वेबसाइट ने इसे पहले से ही अपने ब्राउज़र में कैश किया है।
4. fontello के साथ आप केवल उन आइकनों को अनुकूलित और उपयोग कर सकते हैं जो आवश्यक हैं।
5. फ़ॉन्ट्सएक्स वर्तमान संस्करण 4.2 भी है जहां आप फ़ॉन्ट आइकन प्राप्त कर सकते हैं, यदि आपको ब्राउज़र के पुराने संस्करण के लिए समर्थन की आवश्यकता है तो आप पुराने संस्करण संख्या 3 का चयन कर सकते हैं।
6. आप इसे कम/SASS का उपयोग करके अनुकूलित भी कर सकते हैं।
7. एक और विकल्प सीएसएस स्प्राइट्स का उपयोग कर रहा है, आप परंपरागत तरीकों का उपयोग करके या ऑनलाइन सेवाओं का उपयोग करके इसे अनुकूलित कर सकते हैं।
8. एचटीएमएल में इसका उपयोग करना बहुत आसान है, एक बार जब आप सुनिश्चित करते हैं कि ब्राउज़र में सीएसएस फ़ाइलें और फ़ॉन्ट फ़ाइलें लोड की गई हैं तो आपको HTML तत्व में कक्षा का नाम जोड़ने की जरूरत है और आप जाने के लिए अच्छे हैं, तो आप फ़ॉन्ट को कस्टमाइज़ कर सकते हैं आपकी इच्छा के अनुसार आकार, रंग, पृष्ठभूमि रंग।

Font awesome

Fontello

आप CDN here