किसी कारण से, मैक ओएस एक्स के लिए मेरे फ़ायरफ़ॉक्स 12.0 में, मेरे ⟩ (&rang;) वर्ण होने से कहीं अधिक बड़े हैं। क्रोम और सफारी पर, वे बिल्कुल दिखते हैं कि मैं उन्हें कैसे बनना चाहता हूं।कुछ एचटीएमएल कैरेक्टर एंटिटीज फ़ायरफ़ॉक्स में बहुत अधिक हैं

मैं अपने .htaccess में AddDefaultCharset utf-8 के साथ-साथ मेरी <head> में <meta charset="utf-8"> है (समूह के रूप में मैं कर रहा हूँ पहुंचाने इन फ़ाइलों का उपयोग नहीं कर सकते हैं करने के लिए अपने .htaccess)।

इसके अलावा, एडोब के ब्राउज़र लैब के अनुसार, आईई 7 और 8 बस एक स्क्वायर बॉक्स दिखाएं ... क्या कोई ऐसा व्यक्ति है जिसे मैं इस चरित्र का समर्थन करने के लिए प्राप्त कर सकता हूं? यह चीजों को बहुत आसान बना देगा (जैसे रंग बदल रहे हैं, इसलिए छवियां बहुत असुविधाजनक हैं, और छवियों के साथ कोई रंग फीका नहीं है)।

डेमो: http://cameronspear.com/demos/rang/

यह वह जगह है कि मैं क्या क्रोम में देख सकते हैं और देखने की उम्मीद:

Firefox

यह:

Chrome

यह वही मेरी फ़ायरफ़ॉक्स दिखाया जा रहा है है IE8 के ब्राउज़र लैब्स से एक स्क्रीनशॉट है:

IE8

टी एल; डॉ: मैं इन स्क्रीनशॉट के सभी पहले एक ⟩ उर्फ &rang; अक्षरों का उपयोग की तरह लग रहे करना चाहते हैं। जावास्क्रिप्ट का उपयोग भी स्वीकार्य होगा।

धन्यवाद।

[संपादित करें] मुझे यह निर्दिष्ट करना चाहिए कि यह महत्वपूर्ण नहीं है कि मेरे पास &rang; वर्ण है क्योंकि मैं सीएसएस के साथ अपना रंग बदल सकता हूं और इसे कई ब्राउज़रों में समान दिखता हूं।

समाधान

मैं सिर्फ वास्तव में क्या मैं भावी पीढ़ी की खातिर किया था साझा करना चाहते थे।

नुकीले के लिए युक्तियाँ और संसाधनों के लिए धन्यवाद, मैं अपने खुद के SVG Inkscape के साथ टेम्पलेट और तरीकों का उपयोग कर "How to make your own icon webfont" में वर्णित के रूप में बनाया। मैंने X पर एक बड़ा कोण ब्रैकेट मैप किया और एक छोटा सा x पर मैप किया।

एक चीज जिसमें मैंने भाग लिया था वह था कि मेरे कोण को आधार रेखा को छूने की जरूरत है और "इनलाइन" फिट करने के लिए बॉक्स के शीर्ष पर केवल 72% रास्ता तय करें, इसलिए पूंजी एक्स मेरा मूल बहुत लंबा था, और लोअरकेस एक्स अधिक इनलाइन एक था।

मैं तो http://www.freefontconverter.com/ साथ TTF करने के लिए अपने एसवीजी परिवर्तित और http://www.fontsquirrel.com/fontface/generator

साथ एक webfont में बदल जाती है ... और है कि यह किया गया था।

डेमो (http://cameronspear.com/demos/rang/) अभी भी ऊपर है। आप देख सकते हैं कि यह सभी ब्राउज़रों में सुसंगत दिखता है और ऑनक्लिक रोटेशन एनीमेशन बिंदु के करीब डांग है।

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

यह एक अमूल्य संसाधन बन गया है, और मैं हर किसी को आइकन फ़ॉन्ट्स में प्रवेश करने की इच्छा रखने की सलाह देता हूं। आप CSS-Trick's 113th Screencast से पूरी प्रक्रिया के बारे में अधिक जान सकते हैं।

स्रोत

2012-06-04 CWSpear

वे फ़ायरफ़ॉक्स में मेरे लिए ठीक लग रहे हैं। आईई के लिए, आप अपने स्वयं के आइकन फ़ॉन्ट को बनाने के बारे में बहुत कम कर सकते हैं (जो वास्तव में * वह * कठिन नहीं है, साथ ही आपके पास ग्राफिक्स पर पूर्ण नियंत्रण है)। – Pointy

वे क्रोम – Esailija

में भी मेरे लिए स्क्वायर बॉक्स हैं I क्रोम 21.0.1155.2 dev-m में वर्ग प्राप्त कर रहे हैं, लेकिन हो सकता है कि यह एक देव चैनल बग है? http://i.imgur.com/NU6qT.png – mayhewr

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

Here विषय पर एक सुंदर पूरी तरह से ब्लॉग पोस्ट है। (ब्लॉग नहीं।) मुख्य बात यह है कि यह बहुत अच्छी तरह से वर्णन नहीं करता है, इनक्सकेप "कला बोर्ड" क्षेत्र और फ़ॉन्ट में प्रत्येक ग्लिफ की ऊर्ध्वाधर स्थिति के बीच संबंध है। यह कुछ विस्तार में जाता है, लेकिन मैं इसे कभी भी समझने में सक्षम नहीं हूं।

इसलिए, मैंने एक तरफ एक वर्ग आर्टबोर्ड 1024 पिक्सेल बना दिया है। इसके बाद मैंने इंकस्केप में एक ग्रिड स्थापित किया ताकि कला बोर्ड को 16x16 ग्रिड में विभाजित किया जा सके। इससे यह (कुछ हद तक) वर्णों को डिजाइन करने में आसान बनाता है जो 16px फ़ॉन्ट आकार पर अच्छी तरह से प्रस्तुत करेंगे। (बेशक आप एक अलग फ़ॉन्ट आकार को लक्षित कर सकते हैं, यदि आप चाहते हैं; 16x16 सामानों के लिए अच्छा है, हालांकि उन्हें बहुत छोटा होना चाहिए।) फिर, मैं बस यह सुनिश्चित करता हूं कि जब मैं पेज पर ग्लाइफ डालूं, तो वे 1em बॉक्स द्वारा 1em (या 16px द्वारा 16px; हालांकि आप इसे अपने सीएसएस में करना चाहते हैं) बिना पैडिंग के। मैं <i> टैग का उपयोग करता हूं, और उन्हें display: inline-block देता हूं। यह मुझे बहुत लचीलापन देता है, और यह आम तौर पर महान काम करता है।

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

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

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

स्रोत

2012-06-04 18:40:47 Pointy

अच्छा लग रहा है! मुझे इसे दोपहर में जाना होगा और आपको बताना होगा। इस लेखन और संसाधनों के लिए बहुत बहुत धन्यवाद। – CWSpear

अच्छा ... मैं वेक्टरिंग सामान पर चूसना चाहता हूं, लेकिन यह निश्चित रूप से समाधान था! सौभाग्य से यह इतना आसान प्रतीक था। – CWSpear

क्या आप छवियों का उपयोग करने में सक्षम हैं? वे सभी ब्राउज़रों में एक सतत रूप प्रदान करेंगे। कई मामलों में, छवियां चरित्र प्रतीकों के लिए बेहतर हैं।

स्रोत

2012-06-04 18:18:05 kevin628

एक आइकन फ़ॉन्ट भी सभी ब्राउज़रों में एक सतत रूप प्रदान कर सकते हैं। – Pointy

@ पॉइंटी यह भी काम करेगा! :) – kevin628

आम तौर पर मैं सहमत हूं, मुझे पता है कि रंग एक गुच्छा बदल रहे होंगे, और मैं हर बार आइकन अपडेट नहीं करना चाहता हूं। मैं एक प्रोग्रामर हूं, मैं जितना संभव हो फ़ोटोशॉप से बाहर होना चाहता हूं। एक बिंदु पर, हम इसे होवर राज्यों के बीच फीका था, और यदि हम उस पर वापस जाते हैं, तो यह अच्छा होगा कि तीर रंगों को भी बदल देगा, और न केवल तुरंत सफेद/काला में बदल जाएगा, या नहीं? इस बिंदु पर – CWSpear

यह एक फ़ॉन्ट समस्या है। एक दुर्लभ चरित्र (जो कि अधिकांश फोंट में मौजूद नहीं है) होने की बाधाओं को अधिकतम करने के लिए, फोंट की अधिकतम सूची निर्दिष्ट करें जिसमें सभी शामिल हैं।

पृष्ठ में अभी font-family: Arial,sans-serifspan तत्वों पर सेट किया गया है जिसमें ब्रैकेट होता है। चूंकि एरियल में यह शामिल नहीं है, इसलिए प्रत्येक ब्राउज़र sans-serif के लिए अपनी परिभाषा का उपयोग करेगा। यदि मैप किए गए मानचित्र में ब्रैकेट नहीं है, तो चालाक ब्राउज़र सिस्टम में अन्य फ़ॉन्ट्स के माध्यम से स्कैनिंग की तरह कुछ चालाक कोशिश करते हैं, लेकिन इसके परिणामस्वरूप इसके लिए किसी भी ग्लिफ़ की कमी हो सकती है।

एक अतिरिक्त समस्या है।आम तौर पर इससे कोई फर्क नहीं पड़ता कि आप चरित्र संदर्भों के बजाय &rang; जैसे इकाई संदर्भों का उपयोग करते हैं, लेकिन यहां यह करता है। एचटीएमएल 4.01, &rang; का अर्थ है यू + 232 ए; एचटीएमएल 5 ड्राफ्ट्स से, इसका मतलब है यू + 27 ई 9। आईई यहाँ HTML 4.01 का पालन करता है, जबकि फ़ायरफ़ॉक्स एचटीएमएल 5 परिभाषा का उपयोग करता है। इसलिए आप जिस चरित्र को वास्तव में चाहते हैं उसका उपयोग करना बेहतर है, या तो यूटीएफ -8 एन्कोडिंग में, या एक चरित्र संदर्भ 〉 के रूप में।

आप जांच कर सकते हैं जैसे कि font coverage for U+232A और वरीयता के क्रम में फोंट लिखें। लेकिन आपको यह जांचना चाहिए कि सभी फोंट स्वीकार्य प्रस्तुति देते हैं। उदाहरण के लिए, यदि कैम्ब्रिया मैथ का उपयोग किया जाता है, तो डिफ़ॉल्ट रेखा ऊंचाई बहुत बड़ी होगी, इसलिए आप शायद line-height को कुछ उचित मूल्य जैसे 1.3 सेट करना चाहते हैं।

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

कुछ अधिक जानकारी: Guide to using special characters in HTML।

स्रोत

2012-06-04 19:58:33

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

कुछ एचटीएमएल कैरेक्टर एंटिटीज फ़ायरफ़ॉक्स में बहुत अधिक हैं

समाधान

उत्तर

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