2013-04-19 7 views
7

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

jQuery यूआई CSS Framework जो वर्ग "ui-आइकन" और विभिन्न मानक आइकॉन (320 total icons) जो एक the test page पर देख सकते हैं के लिए कई विशिष्ट वर्गों में शामिल है परिभाषित करता है। सीएसएस ढांचे का उपयोग करने वाले बहुत सारे प्लगइन, वेब साइटें और इतने सारे हैं। उदाहरण के लिए jqGrid प्लगिंग इसका उपयोग करें। जेकग्रिड द्वारा बनाई गई ग्रिड में आइकन शामिल हैं।

Font Awesome icons के बजाय कुछ jQuery UI icons के उपयोग के बारे the answer लिखने के बाद मैं मुझे नियमित रूप से एक ही सवाल पूछ रहा हूँ: क्यों jQuery UI CSS frameworkरेखापुंज है वेक्टर आधारित प्रतीक बजाय प्रतीक? मेरी राय में jQuery यूआई सीएसएस फ्रेमवर्क के आइकन भाग का एक और कार्यान्वयन करना बहुत व्यावहारिक होगा। यदि कोई व्यक्ति सिर्फ jQuery UI थीम को प्रतिस्थापित कर सकता है और आइकन को बेहतर तरीके से कार्यान्वित कर सकता है।

हम अब उच्च डीपीआई (टैबलेट पीसी और स्मार्टफोन के लिए ईवेंट) के साथ मॉनीटर के समय रह रहे हैं। वेब ब्राउज़र में मानक सेटिंग के रूप में बहुत से लोग Zoom सेटिंग 100% के रूप में उच्चतम उपयोग करते हैं। एक
enter image description here
तुलना
enter image description here
एक के साथ बहुत स्पष्ट अंतर देख होगा।

वेब ब्राउज़र (पुराने आईई 7 समेत) के वर्तमान संस्करण वेक्टर आधारित वेब फ़ॉन्ट्स को कम से कम एक प्रारूप WOFF, EOT, TTF, OTF या SVG से समर्थन करते हैं। फोंट डब्ल्यू 3 सी वर्किंग ड्राफ्ट दस्तावेज़ "सीएसएस फ़ॉन्ट्स मॉड्यूल लेवल 3" का हिस्सा हैं (http://www.w3.org/TR/css3-fonts/#src-desc देखें)।

तो क्यों कोई वेब फोंट विकल्पों के साथ jQuery UI के वर्तमान पीएनजी आइकन को प्रतिस्थापित नहीं करता है? कई मुक्त ओपन सोर्स फोंट हैं जो पहले से ही प्रदान करते हैं (देखें here, here, here, here और इसी तरह) सबसे अधिक (लेकिन सभी नहीं) आइकन जिन्हें किसी की आवश्यकता है।

वेब फोंट का उपयोग करने का अतिरिक्त लाभ जो मैं देखता हूं वह jQuery UI थीम्स बनाने के लिए सरल होगा। यदि मैं बेस थीम के अंदर ui-icons_XXX_256x240.png छवियों की तुलना करता हूं, या यदि मैं किसी अन्य थीम की संबंधित छवियों के साथ तुलना करता हूं, तो मुझे छवियों में रंग का उपयोग केवल अंतर के रूप में दिखाई देता है। उपयोग वेक्टर फोंट के मामले में एक बस colorbackground-color निर्दिष्ट कर सकते हैं, या linear-gradient या radial-gradient सीएसएस शैलियों का उपयोग रंग बदलने के लिए या अच्छा रंग प्रभाव उत्पन्न करने के:
enter image description here

मैं वेक्टर माउस के उपयोग में कई सुविधा देखते हैं, लेकिन मैं अब तक एक अच्छी जगह नहीं मिली है जहां कोई वेक्टर आइकन के लिए सुविधा अनुरोध रख सकता है। मैंने the feature request और this one पोस्ट किया, लेकिन मुझे लगता है कि हमारे पास सामान्य jQuery UI फ्रेमवर्क समस्या है।

release of jQuery 2.0 के बाद जो आईई 6/7/8 के समर्थन को छोड़ देता है, क्या यह वेक्टर आधारित वेब फोंट के साथ रास्टर आधारित पीएनजी आइकन को प्रतिस्थापित करने का विचार नहीं है?

शायद मुझे वेक्टर आधारित वेब फोंट के कुछ महत्वपूर्ण नुकसान याद आते हैं? उदाहरण के लिए बहुत खराब प्रदर्शन (जिसे मैंने अभी तक नहीं देखा) या कुछ अन्य चीजें? क्या सभी आवश्यक आइकनों का निर्माण बहुत जटिल है? क्या कुछ और समस्याएं हैं?

मैंने प्रश्न पूछने का फैसला करने के लिए अन्य लोगों का ध्यान आकर्षित करने का सवाल पूछा। मुझे डर है कि समुदाय से संबंधित प्रतिक्रिया के बिना मेरे फीचर अनुरोध का कोई परिणाम नहीं होगा।

इस तरह के फीचर अनुरोध को रखने के लिए सबसे अच्छा तरीका कौन सा होगा? मुझे यह जोड़ना होगा कि फोंट या तस्वीर बनाने का वह विषय नहीं है जहां मैं स्वयं अच्छा हूं। तो मैं खुद को कार्यान्वयन में भाग नहीं ले सकता। माफ़ कीजिये।

इस विषय के बारे में कोई सलाह या आपकी राय का स्वागत है!

उत्तर

0

फ़ॉन्ट्स लागू करने के लिए फ़ॉन्ट अच्छे नहीं हैं। सड़क के संकेतों को देखें - कम से कम तीन रंगों की आवश्यकता है। इस तरह के उद्देश्य के लिए, फोंट को एसवीजी या इसी तरह के प्रारूप द्वारा प्रतिस्थापित किया जाएगा, संकेतों को संकेत देने के साथ संभव है।

क्यों jQuery यूआई ढांचे वेक्टर

मुझे लगता है कि के बजाय रेखापुंज प्रतीक, इस पल में वेक्टर आधारित प्रतीक प्राप्ति के लिए मानकों की कमी से है।

क्या सभी आवश्यक आइकनों का निर्माण बहुत जटिल है? क्या कुछ अन्य समस्याएं हैं?

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

+0

आपका उत्तर धन्यवाद, लेकिन मुझे समझ में नहीं आता कि "कम से कम तीन रंग" की आवश्यकताओं के साथ आपका क्या मतलब है। [डब्ल्यू 3 मानक] (http://www.w3.org/TR/css3-fonts/#src-desc) वर्किंग ड्राफ्ट चरण में है और विभिन्न वेब ब्राउज़र अब फ़ॉन्ट प्रारूपों से * कम से कम एक * का उपयोग करने की अनुमति देता है। यदि कोई पीएनजी (या सशर्त सीएसएस जैसे ' ') के साथ फोंट का उपयोग करते हुए' यूई-आइकन-ट्रैश 'या' ui-icon-seek-next' जैसे jQurey UI क्लास के सीएसएस को परिभाषित करता है) तो मुझे कोई समस्या नहीं दिखती है। अगर मैं ऐसे सीएसएस का उपयोग करता हूं तो मुझे केवल फायदे दिखाई देते हैं। यदि सीएसएस का अगला संस्करण WOFF के बजाय एसवीजी का उपयोग करेगा, टीटीएफ इससे कोई फर्क नहीं पड़ता। – Oleg

+0

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

+0

आइकन के साथ सीएसएस का उपयोग करने वाले उपयोगकर्ता के दृष्टिकोण से मुझे अब रूट यूज़र सीएसएस से "यूआई-आइकन ui-icon-triangle-1-n" वर्गों को रास्टर आइकन रखने की आवश्यकता है। यदि मैं बजाय '' पर वर्ग "आइकन-सॉर्ट-अप" श्रेणी जोड़ दूंगा, तो इसके बजाय मेरे पास रास्टर आइकन होगा। तो मेरा सवाल है: क्यों सीएसएस नहीं है जो पहले "UI-icon" और "ui-icon-triangle-1-n" के साथ परिभाषित किया गया है, लेकिन आइकन आइकन की छोटी पिक्चर के साथ "आइकन-सॉर्ट-अप" से परिभाषा का उपयोग क्यों किया जाता है? सीएई में मैं एचटीएमएल पेज पर ** पुराना कोड ** का उपयोग कर सकता हूं, लेकिन मेरे पास पुराने रास्टर आइकन के बजाय वेक्टर आइकन का कुछ कार्यान्वयन होगा। – Oleg

संबंधित मुद्दे