सीएसएस फ़ॉन्ट चौरसाई

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

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



इस चाल को देखें ।

---

अनुवादक के नोट:

• मैथ्यू एवन्स द्वारा इस ब्लॉग पोस्ट में दिए गए भाषण का विंडोज़ एक्सपी में अपर्याप्त फॉन्ट स्मूथिंग से संबंधित एक प्रसिद्ध प्रभाव है : उनमें "लगभग ऊर्ध्वाधर" लाइनें काफी चिकनी दिखती हैं (विशेषकर जब क्लीयरपाइप खेलने में आता है), लेकिन "लगभग क्षैतिज" वे ध्यान देने योग्य चरणों से मिलकर होते हैं, ऊर्ध्वाधर दिशा में बने एक समोच्च रेखा के तेज (गैर-चिकने) सिंगल-पिक्सेल झटके के कारण। यह पता चला है कि इस समस्या को दूर किया जा सकता है!
  
• मनाया छाया प्रभाव की असामान्य रूप से प्रभावी ताकत को नोटिस करने के लिए मुझे बहुत गहरा आश्चर्य हुआ। न केवल अक्षरों की रूपरेखा की चिकनाई बदल जाती है। कुछ अक्षरों के बीच की दूरी, एक शब्द में कुछ अक्षरों की स्थिति और यहां तक ​​कि कुछ अक्षरों की चौड़ाई भी ≈1 पिक्सेल से बदल जाती है । कुछ छोटे अक्षरों की रूपरेखा ("ईए एट ई 3 2011" शिलालेख में) काफी पतली दिखना शुरू होती है।
  
• मैथ्यू एवन्स ने अपने ब्लॉग पोस्ट में छाया और बिना छाया वाले फ़ॉन्ट के अंतर को देखने के लिए अपने ब्लॉग पोस्ट पर लागू किया है, आप इन प्रभावों को भी देख सकते हैं। अक्षरों को न केवल पूरी तरह से चिकना किया जाता है, बल्कि आगे और पीछे भी कूदते हैं, चौड़ाई और मोटाई (और इटैलिक्स, ऐसा लगता है, एक ढलान भी है) को बदलते हुए। वे सरगर्मी कर रहे हैं! यह वास्तव में आश्चर्यजनक है कि यह सब CSS3 में कुछ सरल लाइनों के साथ हासिल किया गया है:
  

  h1.title { text-shadow:-1px -1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(255,255,255,0.2), /*    */ 1px 1px 1px rgba(0,0,0,0.7); /*   */ } 

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