Webfonts - अंडरस्टैंडिंग विंडोज एंटी-एलियासिंग (UPD)

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

इन दोनों अंशों में अंतर स्पष्ट है। पहला एक बेतरतीब ढंग से चुनी गई अनुकूली-छवियों वाली साइट से बनाया गया है, और दूसरा इसकी स्थानीय प्रति से है, जिसके सीएसएस में शाब्दिक रूप से एक पंक्ति को बदल दिया गया था।

(जो लोग लेख का पहला संस्करण पढ़ते हैं, वे तुरंत UPD पर जा सकते हैं, जो Chrome के लिए समस्या का वैकल्पिक समाधान प्रदान करता है)

समस्या का सार

एक छोटी सी सामान्य टिप्पणी - आलेख में प्रस्तुत अध्ययन विंडोज 7 के तहत आयोजित किए गए थे। अन्य प्लेटफार्मों पर स्थिति के बारे में टिप्पणियों में सीखना दिलचस्प होगा।

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

समाधान की खोज, हमेशा की तरह, विशेष संसाधनों में से एक पर इस मुद्दे के प्रकाशन के साथ शुरू हुई। उत्तर उत्साहजनक थे, लेकिन उनमें से एक ने भी पूरी तरह से मदद नहीं की, हालांकि उन्होंने इस क्षेत्र में मेरे ज्ञान के क्षितिज को व्यापक बनाया। एक कार्यशील समाधान की खोज में तीन घंटे लगे, जिसके दौरान दीवार और, तदनुसार, उनके स्वयं के माथे क्षतिग्रस्त हो गए, हालांकि तैयार किए गए समाधानों के साथ लेखों की कोई कमी नहीं थी। हमेशा की तरह, हॉर्नड विराम चिह्न में कहीं छिपा हुआ था।

क्रोम

सौभाग्य से, मैं इस समस्या का सामना करने वाला पहला व्यक्ति नहीं हूं और कीवर्ड खोज ने जल्दी से इसे एसवीजी फोंट का उपयोग करके हल किया, जो कि अपने ट्रू टाइप समकक्षों के विपरीत, क्रोम में पहले प्रकार के एंटी-एलियासिंग, अर्थात् एंटी-एलिंगिंग का उपयोग करके प्रदान किए जाते हैं। ऐसा लगता है - यहाँ यह खुशी है - लेकिन यह वहां नहीं था!

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

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

सीएसएस खोलें और देखें कि FontSqurell सर्वर पर हमारे लिए क्या उत्पन्न हुआ है:

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

पहली नज़र में, कोई अपराध ध्यान देने योग्य नहीं है। मैं एक समाधान खोजने की प्रक्रिया का वर्णन नहीं करूंगा, दीवार पर एक ही सिर को पीटने से बाधित, मैं तुरंत एक टुकड़ा दे दूंगा जो वांछित परिणाम उत्पन्न करता है:

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

जैसा कि ऊपर लिखा गया था, अंतर केवल एक पंक्ति में है। फ़ॉन्ट svg परिभाषा को तुरंत eot परिभाषा के तहत रखा जाता है और #ColaborateThinRegular प्रतिस्थापन को इससे हटा दिया जाता है। अपने आप में अंतर का न्याय करें - दाईं ओर मूल सीएसएस के साथ एक टुकड़ा है (कोई चौरसाई नहीं है), दाईं ओर बाईं ओर सही है:

इसके लिए स्पष्टीकरण बहुत सरल है - svg फ़ॉन्ट के विवरण को आगे बढ़ाते हुए, हमने WebKit Browser (Chrome, Safari) में इसकी प्राथमिकता बढ़ाई और इसका उपयोग TTF के बजाय किया जाने लगा, जो किसी कारण से ये Windows ब्राउज़र सुचारू नहीं होते हैं।

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

लेकिन यह सब नहीं है जो मैंने वेब फोंट के बारे में सीखा है। अगला, हम सिरिलिक पात्रों के साथ सेट के लिए FontSquirrel में ठीक-ट्यूनिंग के बारे में बात करेंगे, अन्य ब्राउज़रों में एंटी-एलियासिंग और वेब फोंट लोड करने की गति का अनुकूलन। मैं आखिरी पैराग्राफ से शुरू करता हूं।

अनुकूलन डाउनलोड करें

जैसा कि आप जानते हैं, किसी भी सौंदर्य के लिए बलिदान की आवश्यकता होती है। कस्टम फोंट के मामले में, आपको डाउनलोड किए गए डेटा का आकार बढ़ाकर पृष्ठ लोड समय का त्याग करना होगा। आप हमारी फ़ॉन्ट फ़ाइलों के संपीड़न को लागू करके इससे निपट सकते हैं। Svg के लिए, प्रक्रिया निम्नानुसार है - gzip के साथ हम अपनी फ़ाइल को संपीड़ित करते हैं, इसका नाम बदल देते हैं - इसे svgz एक्सटेंशन के साथ असाइन करें और सर्वर कॉन्फ़िगरेशन में एक नया MIME- प्रकार जोड़ें। मैं अपाचे के लिए एक उदाहरण देता हूं (आप इसे .htaccess में निर्दिष्ट कर सकते हैं):

 AddType font/opentype .svg .svgz AddEncoding gzip .svgz 

और इसी लाइन को css में जोड़ें (z जोड़ें) - url ('ColabThi-webfont.svg z ') प्रारूप ('svg')

कृपया ध्यान दें कि फॉन्ट / ऑपेंथाइप एक मानक MIME- प्रकार नहीं है, लेकिन यह इस प्रकार है जो क्रोम कंसोल में कष्टप्रद त्रुटि से छुटकारा पाने में मदद करता है: संसाधन को फ़ॉन्ट के रूप में व्याख्या किया गया लेकिन MIME प्रकार की छवि / svg + xml के साथ स्थानांतरित किया गया

FontSquirrel सेटिंग्स

अब फ़ॉन्ट में ASCII-7 तालिका के बाहर वर्णों को शामिल करने के लिए FontSquirrel को कॉन्फ़िगर करने के तरीके के बारे में। नीचे स्क्रीनशॉट में दिखाई गई सेटिंग्स एक्सपर्ट मोड में उपलब्ध हैं। मैं आपको एक विकल्प दूंगा जिसने मेरे मामले में अच्छा काम किया है, अन्य प्रकार के फ़ॉन्ट शामिल करना न भूलें, मुझे केवल एसवीजी की आवश्यकता थी।
मैं इन सेटिंग्स के स्पष्टीकरण के लिए आभारी रहूंगा, अगर आप किसी तरह उन्हें टिप्पणियों में अपने क्षेत्र के विशेषज्ञों से सुधार कर सकते हैं।

अन्य ब्राउज़र

अंत में, मैं संक्षेप में IE, फ़ायरफ़ॉक्स और ओपेरा की सुविधाओं पर संपर्क करूंगा। मैं आपको याद दिला दूं कि हम विंडोज 7 के बारे में बात कर रहे हैं।

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

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

निष्कर्ष

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


UPD यूरेका! GreatRash से एक अनुस्मारक के बाद , मैंने फिर भी इस कारण का पता लगाने का फैसला किया कि -webkit-font-smoothing ने मेरे लिए काम क्यों नहीं किया और इस प्रक्रिया में एक बग रिपोर्ट मिली। सौ से अधिक टिप्पणियां हैं, लेकिन एक बे बे के बीच में एक असली हीरा था ! यह डिज़ाइन आपको एसवीजी फोंट को छोड़ने की अनुमति देता है और, पहली नज़र में, क्रोम ने अन्य सभी ब्राउज़रों की तरह ही पाठ को प्रस्तुत करना शुरू किया, हालांकि अक्षरों के बीच की दूरी अलग-अलग रहती है, लेकिन यह, जाहिर है, इस नुस्खा का उपयोग करके भी ठीक किया जा सकता है

 body { -webkit-font-smoothing: subpixel-antialiased !important; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; }