Google क्रोम टेक्स्ट छाया प्रतिपादन

Question

Google क्रोम CSS3 टेक्स्ट-छाया के कार्यान्वयन में एक बेहद परेशान दोष है। पाठ-छाया लागू होने पर उप-पिक्सेल एंटीअलाइजिंग बंद हो जाती है। अन्यथा -webkit-font-smoothing इसे अन्यथा राजी करेगा। कच्चे अल्फा-चैनल एंटी-एलियास अक्षरों के साथ छाया intermixing की ओर जाता है और यह पिक्सेल वाले पाठ के साथ एक बहुत बदसूरत देखो उत्पादन समाप्त होता है। यह लिखने के लिए और भी स्पष्ट है कि मोनोटाइप कॉर्सिवा http://www.newfonts.net/index.php?pa=show_font&id=130

उन स्थानों में से एक जो आप इसे स्पष्ट रूप से देख सकते हैं ट्विटर पर है - http://dev.twitter.com/pages/auth। पाठ-छाया का उपयोग टेक्स्ट रूपरेखा के लिए किया जाता है: क्रोम में पृष्ठ देखें, एफएफ या आईई के साथ तुलना करें, आप देखेंगे कि यह कितना बुरा है।

प्रभाव छोटे पाठ के साथ भी बदतर हो जाता है जब तक कि यह पूरी तरह से अपठनीय नहीं हो जाता है। इस मुद्दे की तकनीकी चर्चा यहां उपलब्ध है: http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=en

क्रोमियम प्रोजेक्ट (23440 जारी करें) में सबमिट की गई एक बग है। यह बग एक साल से भी अधिक समय तक रहा है और अभी भी किसी को भी असाइन नहीं किया गया है। Google देव ने इसे देखा, फैसला किया कि यह इतना महत्वपूर्ण नहीं है और इसे उम्र तक छोड़ दिया गया है। यह पता चला है कि वे केवल "लोकप्रिय" कीड़े को ठीक करते हैं, एक अभ्यास इतना लंगड़ा है कि यह प्रभावशाली दिखता है! मैं क्रोम से बहुत निराश हूँ! वेब टाइपोग्राफी और CSS3 का उपयोग वेब को अधिक से अधिक खूबसूरत जगह बनाने के लिए हर दिन अधिक से अधिक लोगों द्वारा किया जाता है! यह एक शर्म की बात है कि इस मुद्दे को धीमा करने के लिए मौजूद है।

तो, इसे एक निश्चित करने के लिए एक सार्वजनिक प्रयास की आवश्यकता है। दूसरों को इसके बारे में बताएं, अपने ब्लॉग में लिखें। आप http://code.google.com/p/chromium/issues/detail?id=23440 पर जा सकते हैं और इस मुद्दे के लिए वोट दे सकते हैं। आप शीर्ष बाएं पृष्ठ की ओर स्थित स्टार पर क्लिक करके ऐसा कर सकते हैं (कुछ प्रकार का Google खाता आवश्यक - जीमेल, आदि)।

1. एक तकनीकी समाधान का पता लगाएं: -

   चीजों को और अधिक स्पष्ट करने के लिए मेरे सवाल का दो गोल है।

2. Google को क्रोम में समस्या को ठीक करें।

मैं इस मुद्दे के बारे में एक लेख में पोस्ट किए गए प्रत्येक लिंक को वोट दूंगा और सबसे अच्छा एक तकनीकी समाधान या सार्वजनिक प्रयास स्वीकार कर लिया जाएगा।

Answer 1

@sebastian's fix क्रोम के पुराने संस्करणों के लिए काम नहीं कर सकते हैं।
आयरन ब्राउज़र (क्रोमियम कांटा) v3.0.197 के तहत स्क्रीनशॉट।0:
                                                                                                                   
सभी जो कि एक छाया ही और -webkit-font-smoothing रूप में अच्छी तरह -webkit-text-stroke के रूप में कोई प्रभाव नहीं है देखने के लिए सौंपा गया है। http://jsbin.com/acalu4

tldr:

इसके बजाय, मैं जब तक मैं इसे ठीक कर आए हैं प्रयोग किया गया है अपने अन्य छाया (रों) से पहले एक अहानिकर 0 0 0 transparent, जोड़ें।

ज्ञात मुद्दे: कुछ ब्राउज़रों केवल 1 text-shadow संभाल कर सकते हैं। उन्हें प्रभावित करने के लिए (उनकी एकमात्र छाया को मारना) यह जावास्क्रिप्ट के माध्यम से केवल क्रोम पर लागू किया जाना चाहिए।

Answer 2

पहला भाग (तकनीकी कार्यवाही): पाठ को पतला स्ट्रोक देना।

इस सीएसएस को आजमाएं, आपको वांछित प्रभाव प्राप्त करने के लिए मूल्यों को ट्विक करना पड़ सकता है।

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */ 
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */ 

केवल वेबकिट ब्राउज़र (क्रोम, सफारी) इसे पढ़ते हैं, इसलिए यह एफएफ या आईई को प्रभावित नहीं करेगा। यहां एक उदाहरण के साथ

खेलने: http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/

Answer 3

मैं इस के लिए एक समाधान मिल गया। ऐसा लगता है कि सफारी 4+, क्रोम (8.0x पर परीक्षण) और फ़ायरफ़ॉक्स 3.5 में काम करता है।

यह प्रयास करें:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
      0px 1px rgba(0,0,0,0.75), 
      1px 0px rgba(0,0,0,0.75), 
      0px 0px rgba(0,0,0,0.75);