यह के बारे में बिना "पुराने ब्राउज़र को समर्थन दे" बात करने के लिए कोई मतलब नहीं है: जानते हुए भी क्या आपके अधिकांश उपयोगकर्ता (होना which'll निश्चित रूप से एक से अधिक ब्राउज़र) पर होगा
- , और,
- क्या सुविधा का उपयोग करना चाहते हैं के लिए समर्थन उन ब्राउज़रों, जिसके लिए हम काम http://caniuse.com
कि कहा के साथ
उपयोग कर सकते हैं के लिए है, यह एक जवाब कैसे सब की व्याख्या के रूप में इतना होने के लिए नहीं जा रहा है उन बिंदुओं को आप "फोरम" के सामने प्रस्तुत करते हैं nded। उत्तर बहुत अच्छे हैं, लेकिन इस मामले में हमें सीधे रिकॉर्ड सेट करने की आवश्यकता है ताकि आप तथ्यों के आधार पर वास्तविक निर्णय ले सकें (या तो "कभी नहीं", या "अब" वैध नहीं) पूर्वकल्पनाएं। मैं एक इंजीनियरिंग के नजरिए से फोंट के साथ काम कर आप इन दावों को बनाए रखने के लिए जाने के लिए =)
"फ़ॉन्ट प्रतीक चाहे कितना पूरी तरह से अपने घटता एक पिक्सेल ग्रिड से संरेखित होते हैं धुँधली हैं मेरे जीवन का रास्ता भी कई साल बिताए।नहीं भयंकर विंडोज प्रतिपादन उल्लेख करने के लिए "
यह सादे पुराने है सच नहीं वेक्टर ग्राफिक्स, अगर वे खराब प्रस्तुत करना, एसवीजी भी खराब ही आकार में प्रस्तुत करना होगा के रूप में, हालांकि आम तौर पर एसवीजी बदतर प्रस्तुत करना होगा:।। फोंट वास्तव में छोटे बिंदु आकार से निपटने के लिए सूक्ष्म रूपरेखा-अनुकूलन की अनुमति दें (.otf .tf से बेहतर है, लेकिन फ़ॉन्ट निर्माता को उन्हें रखने के लिए समय बिताया जाना चाहिए। बहुत सारे पेशेवर फोंट उस काम के साथ आते हैं), और एसवीजी ऐसा नहीं करता है, क्योंकि इसके पास ऐसा करने के लिए अपने वेक्टर ग्राफिक्स भाषा में कोई निर्देश नहीं है। ऐसे में, फोंट या तो (यदि उनके पास कोई अनुकूलन निर्देश नहीं है), या एसवीजी (यदि वे करते हैं) से बेहतर होते हैं।
उदाहरण के लिए, Font-Awesome रूपरेखा अनुकूलन के साथ आता है जो इसे 14px के फ़ॉन्ट आकार तक सभी तरह से पिक्सेल-परिपूर्ण प्रस्तुत करने की अनुमति देता है, जो किसी पृष्ठ पर टेक्स्ट के लिए डिफ़ॉल्ट आकार के रूप में ब्राउज़र का उपयोग करने से पहले से छोटा है (लगभग सभी ब्राउज़र सहमत हैं 16px सेरिफ़ का डिफ़ॉल्ट उपयोग करें)। यदि आपने अपना आइकन सेट लिया और उसे एसवीजी में परिवर्तित कर दिया, तो 14px आकार से मेल खाने के लिए उन स्केल किए गए लोगों का उपयोग करने का प्रयास किया, वे एक पूर्ण धुंधली गड़बड़ी देखेंगे।
या आप आगे बढ़ने वाले आइकन सेट का उपयोग कर सकते हैं, जैसे कि Symbol Set जिसे स्पष्ट रूप से ग्रिड संरेखण के लिए डिज़ाइन किया गया है, जिसका अर्थ है कि इरादे से भी कम आकार में, यह अभी भी उल्लेखनीय रूप से कुरकुरा प्रदान करता है।
एसवीजी यहां हार जाता है।
विंडोज प्रतिपादन के लिए, यह खराब हो सकता है, लेकिन यह विंडोज की गलती नहीं है। Uniscribe और DirectWrite दोनों फोंट प्रतिपादन में वास्तव में अच्छे हैं। पसंद है, वास्तव में अच्छा (जो आश्चर्यचकित नहीं हो सकता है, क्योंकि डेस्कटॉप प्रकाशन परंपरागत रूप से माइक्रोसॉफ्ट का मुख्य व्यवसाय रहा है क्योंकि इसकी शुरुआत बहुत अधिक है, हालांकि यह स्थानांतरित हो रही है)। ब्राउजर जो उन्हें हुक करते हैं उन्हें फोंट वास्तव में अच्छी तरह से: आईई ने आईई 4 के बाद भी वेब फोंट का समर्थन किया है ... यह 1 99 7 है। एचटीएमएल 4 एक बात भी थी, हम उस समय HTML3.2 पर थे।
समस्या इतनी "विंडोज" नहीं है, क्योंकि यह "पुराना ब्राउज़र है जो विंडोज़ पर नहीं है"। ब्राउज़रों को वास्तव में बहुत लंबे समय तक वेब फोंट की परवाह नहीं थी। यह केवल पिछले कुछ वर्षों में है कि बड़े प्रयास अचानक यह सुनिश्चित करने में चले गए हैं कि वे अच्छे फ़ॉन्ट आकार देने वाले इंजन (जैसे Harfbuzz, जो अब फ़ायरफ़ॉक्स और क्रोम द्वारा उपयोग किया जाता है) के साथ आते हैं, और आपको फ़ॉन्ट्स के लिए अच्छे नतीजे नहीं मिलेगा जब तक कि आप विंडोज मशीन पर "नोट-आईई" के आधुनिक संस्करण का उपयोग करना।
और फिर अंततः विंडोज और आईई पर "फ़ॉन्ट बनाम एसवीजी" के लिए विशिष्ट समस्या: जबकि आईई ने वेब फोंट का समर्थन हमेशा के लिए किया है, एसवीजी समर्थन केवल आईई 9 में उतरा है, इसलिए यदि आपको IE8, you can't even use SVG का समर्थन करने की आवश्यकता है। इस बहुत विशिष्ट लक्षित दर्शकों के मामले में, "फोंट बनाम एसवीजी" एक प्रश्न भी नहीं है, आप में फ़ॉन्ट के साथ जाने के लिए हैं।
"फ़ॉन्ट पर नए आइकन जोड़ना मुश्किल है, खासकर जब वेक्टर स्रोत फ़ॉन्ट से बनाया गया है और यहां तक कि खो गया है।"
कोई यह नहीं है, तो आप अभी भी सीएसएस के साथ HTML का उपयोग कर रहे हैं, ऐसा करने के लिए हम हमेशा जब हम की जरूरत है "इस फ़ॉन्ट में नहीं पत्र" क्या करना: उपयोग font-फ़ॉलबैक: font-family: iconfont1, iconfont2, iconetc.
"स्वीकार्य क्रॉस-ब्राउज़र समर्थन के लिए इसे विभिन्न फ़ॉन्ट संस्करणों (वाफ, ईओटी, टीटीएफ) की गुच्छा की आवश्यकता है।।, caniuse हमें उस everything supports WOFF से पता चलता है और कुछ संस्करणों के लिए ऐसा किया है
यहां तक कि आईई हालांकि अगर आप की जरूरत है: "
अभी नहीं कुछ वर्षों के लिए
इन दिनों हम करते हैं नहीं कई स्रोतों की आवश्यकता है। आईई 8 का समर्थन करने के लिए आपको खुद को .eot (जो सचमुच केवल ttf फ़ाइल को अतिरिक्त मेटाडेटा के साथ ढूंढना होगा, इसलिए आईई इसे स्वीकार करेगा ... बस WOFF की तरह!) और फिर इस तथ्य के साथ रहें कि यदि इसकी आवश्यकता है ओटीएफ से ईओटी में एक रूपांतरण, आप एक शर्टी फ़ॉन्ट के साथ खत्म होने जा रहे हैं क्योंकि यह एक हानिकारक रूपांतरण है (जैसे .png से jpg में कनवर्ट करना। उत्कृष्ट रूपांतरण सॉफ़्टवेयर एक सभ्य परिणाम उत्पन्न कर सकते हैं, सामान्य सॉफ्टवेयर एक औसत परिणाम उत्पन्न करेगा)।
और चूंकि सबकुछ डब्ल्यूओएफएफ का समर्थन करता है, इसलिए हम (शुक्रिया) को "बुलेटप्रूफ" @ फ़ॉन्ट-चेहरे नियम के साथ टीटीएफ + ओटीएफ + ईओटी + वोफ + एसवीजी के हास्यास्पद सभी समावेशी सेटों की आवश्यकता नहीं है जो भार को अनुकूलित करने का प्रयास करता है ऑर्डर करें ताकि बहुत अधिक फाइलों को अनावश्यक रूप से लोड नहीं किया जा सके - बस WOFF का उपयोग करें। किया हुआ। और एक अचार में, .eot को पहले स्रोत के रूप में जोड़ें ( स्वरूप संकेतक के साथ) और IE को छोड़कर सबकुछ इसे छोड़ देगा।
SVG font support पर भी देखने लायक है: वस्तुतः कुछ भी इसका समर्थन नहीं करता है, और जो लोग इसे कम करने की प्रक्रिया में हैं। क्योंकि एसवीजी फोंट का उपयोग करने का परिणाम निकला अविश्वसनीय रूप से ज्यादा असली फोंट का उपयोग कर, बिंदु 1.
"पर स्पष्टीकरण रेखांकित अंत फोंट में से भी बदतर होने के लिए ग्राफिक्स के लिए वास्तव में नहीं कर रहे हैं एक चीज के रूप में एसवीजी फोंट बंद कर दिया गया बिलकुल नहीं (विशेष रूप से मोनोक्रोम नहीं), ऐसा लगता है कि इस उद्देश्य के लिए डमी खाली और गैर-अर्थपूर्ण <span class="icon"></span> का उपयोग करने का सही तरीका नहीं है। "
इन दोनों दावों में गलत हैं।
फ़ॉन्ट्स एन्कोडिंग वेक्टर ग्राफिक्स के लिए हैं जो टाइपसेटिंग संदर्भ में उपयोग किए जाने हैं। इसका मतलब पत्र, या प्रतीक, या इमोजी हो सकता है; यह संगीत नोट्स या महजोंग टाइल्स भी हो सकता है। और जिस तरह से वे इसे हाल ही में "एकल रंग" के रूप में देखते हैं, जो शब्दशः क्या मोनोक्रोम है। फोंट के लिए मोनोक्रोम प्रतिपादन एकमात्र जगह हो सकती है, मोनोक्रोम पर मॉनीटर्रोम मॉनीटर करता है, इस मामले में: जहां आपके वेबपृष्ठों का उपयोग किया जा रहा है, वे वेबफोंट को प्रस्तुत कर सकते हैं, लेकिन प्राचीन-यहां तक कि सीआरटी तकनीक पर भी ऐसा करते हैं O_O
अर्थशास्त्र के लिए: यदि आपको उस आइकन की आवश्यकता है जिसका दस्तावेज़ के अंदर कोई अर्थ नहीं है और पूरी तरह से UI कैंडी है तो आप एक गैर-अर्थपूर्ण तत्व चाहते हैं, ताकि पाठ पाठक और दृश्य या पढ़ने की अक्षमता वाले लोगों के लिए अपने आइकन को उनसे ज़ोर से न पढ़ें, और खोज इंजन (निजी या सार्वजनिक) के लिए टेक्स्ट इंडेक्सर्स पूरी तरह से उन्हें पूरी तरह अनदेखा कर सकते हैं। आपका आइकन निश्चित रूप से एक गैर-अर्थपूर्ण खाली तत्व होना चाहिए जिसे सब कुछ छोड़ दिया जा सकता है।
उन सभी के साथ, बिटमैप्स के बारे में क्या?
बिटमैप्स absolutely win कम बिंदु आकार पर, लेकिन यह आश्चर्यजनक फोंट हो सकता है कि वास्तव में एम्बेडेड बिटमैप्स हो सकते हैं ताकि वे छोटे बिंदु आकारों पर वेक्टर ग्राफिक्स के वास्तविक बिटमैप्स प्रस्तुत कर सकें।
बेशक, केवल उच्च ग्रेड फोंट उन लोगों के साथ आते हैं, लेकिन यह भी एक चीज है जिसके लिए आप जांचते हैं: क्या आइकन आइकन आप बिटमैप्स के साथ आते हैं? यदि हां, तो हमारे पास विजेता है। यदि नहीं, तो हो सकता है कि आप उस आइकन फ़ॉन्ट को लेना चाहें जिसे आप उपयोग करना चाहते हैं, अपने आइकन को बिटमैप फ़ाइल के रूप में जेनरेट करें, और फिर अपनी साइट पर इसका उपयोग करने से पहले बिटमैप को मैन्युअल रूप से साफ़ करें।
इस प्रक्रिया स्वाभाविक पुस्तिका है, कोई utiltiy आपके लिए यह कार्य और नहीं होगा यह गलत पर्याप्त बार है कि आप अब भी चीजों को ठीक करने के लिए की जरूरत है मिलता है, लेकिन यदि आप ऐसा नीचे यह तरीका अपनाते हैं, और आप अपना खुद का बनाएँ आइकन एक प्रसिद्ध आकार के आधार पर, एक बिंदु आकार पर जो आइकनों को फ़ॉन्ट प्रतिपादन से बेहतर दिखता है: दुनिया को वापस दें और उन बिटमैप्स को फ़ॉन्ट निर्माता को वापस भेजें ताकि वे फ़ॉन्ट का EBLC, EBDT, and EBSC tables बनाने के लिए उनका उपयोग कर सकें और हर किसी को फ़ॉन्ट के अंदर बिटमैप्स रहने का आनंद मिलता है, इसलिए हमें पागल सीएसएस स्प्राइट प्रतिपादन करने की आवश्यकता नहीं है।
बिना किसी पुराने ब्राउज़र का समर्थन करने "के बारे में बात करने का कोई मतलब नहीं है) यह जानकर कि आपके अधिकांश उपयोगकर्ता क्या होंगे (जो पाठ्यक्रम के कई ब्राउज़र होंगे), और बी) सुविधा के लिए आपको क्या समर्थन है उन ब्राउज़रों के लिए उपयोग करना चाहते हैं, जिसके लिए हम आसान http://caniuse.com का उपयोग कर सकते हैं, जो यह भी दिखाएगा कि इन दिनों हमें * एकाधिक स्रोतों की आवश्यकता नहीं है: [सबकुछ WOFF का समर्थन करता है] (http: // caniuse .com/# खोज = WOFF)। हमें बहुत अधिक फ़ाइलों को लोड न करने की कोशिश करने के लिए "बुलेटप्रूफ" @ फ़ॉन्ट-फेस नियम के साथ हास्यास्पद ttf + otf + eot + woff + svg सेट की आवश्यकता नहीं है =) –
@ माइक दुर्भाग्य से आईई 8 का समर्थन करने वाले मेरे वर्तमान कार्यों के लिए कभी-कभी महत्वपूर्ण है , लेकिन फिर भी इसके लिए फॉलबैक जला नहीं है, मुख्य सवाल एसवीजी का उपयोग कर सद्भाव हासिल करना है। –
वाह! मेरे लिए शर्मिंदा है कि मैं उस हास्यास्पद बुलेटप्रूफ तकनीक के लिए बहुत उपयोग किया जाता है। WOFF समर्थन के लिए आंखें खोलने के लिए धन्यवाद! –