मुद्दे की स्थिति, जून 2014: क्रोम 37 के साथ फिक्स्ड
अंत में, Chrome टीम इस समस्या के लिए Chrome 37 के साथ एक रिलीज़ जारी करेगी, जिसे जुलाई 2014 में सार्वजनिक किया जाएगा। वर्तमान स्थिर Chrome 35 और नवीनतम Chrome 37 (प्रारंभिक विकास पूर्वावलोकन) की तुलना का उदाहरण यहां देखें:
मुद्दे की स्थिति, दिसंबर 2013
1.) फोंट लोड करने के दौरान कोई उचित समाधान नहीं है@import
, <link href=
या Google के द्वारा webfont.js
। समस्या यह है कि क्रोम बस Google के एपीआई से .woff फ़ाइलों का अनुरोध करता है जो बहुत ही भयानक रूप से प्रस्तुत करते हैं। आश्चर्यजनक रूप से अन्य सभी फ़ॉन्ट फ़ाइल प्रकार खूबसूरती से प्रस्तुत करते हैं। हालांकि, कुछ सीएसएस ट्रिक हैं जो प्रदान किए गए फ़ॉन्ट को थोड़ा "स्मूथ" करेंगे, आपको इस उत्तर में वर्कअराउंड (एस) गहरा मिलेगा।
2.) इस के लिए एक वास्तविक समाधान है जब फोंट की स्व-मेजबानी, पहली बार Jaime फर्नांडीज ने इस Stackoverflow पृष्ठ पर एक अन्य उत्तर में पोस्ट किया , जो एक विशेष क्रम में वेब फोंट लोड करके इस समस्या को ठीक करता है। मुझे लगता है कि उसके उत्कृष्ट उत्तर की नकल करना बुरा लगेगा, इसलिए कृपया वहां एक नज़र डालें। एक (अप्रमाणित) समाधान भी है जो केवल TTF / OTF फ़ॉन्ट का उपयोग करने की सलाह देता है क्योंकि वे अब लगभग सभी ब्राउज़रों द्वारा समर्थित हैं।
3.) Google Chrome डेवलपर टीम उस मुद्दे पर काम करती है। जैसा कि रेंडरिंग इंजन में कई बड़े बदलाव हुए हैं, जाहिर तौर पर प्रगति में कुछ है।
मैंने उस मुद्दे पर एक बड़ी ब्लॉग पोस्ट लिखी है, एक नज़र के लिए स्वतंत्र महसूस करें:
Google क्रोम में बदसूरत फ़ॉन्ट प्रतिपादन कैसे ठीक करें
पुनरुत्पादनीय उदाहरण
देखें कि कैसे प्रारंभिक प्रश्न से उदाहरण आज क्रोम 29 में दिखता है:
सकारात्मक विषय:
बाएं: फ़ायरफ़ॉक्स 23, दाएं: क्रोम 29
सकारात्मक विषय:
शीर्ष: फ़ायरफ़ॉक्स 23, नीचे: क्रोम 29
NEGATIVE EXAMPLE: क्रोम 30
नकारात्मक उदाहरण: क्रोम 29
उपाय
उपरोक्त स्क्रीनशॉट को फिक्स करना -webkit-text-स्ट्रोक:
पहली पंक्ति डिफ़ॉल्ट है, दूसरी है:
-webkit-text-stroke: 0.3px;
तीसरी पंक्ति में है:
-webkit-text-stroke: 0.6px;
तो, उन फोंट को ठीक करने का तरीका बस उन्हें दे रहा है
-webkit-text-stroke: 0.Xpx;
या RGBa वाक्य रचना (nezroy द्वारा, टिप्पणियों में पाया गया! धन्यवाद!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
एक पुरानी संभावना भी है : पाठ को एक सरल (नकली) छाया दें:
text-shadow: #fff 0px 1px 1px;
RGBa समाधान (जैस्पर एस्पेजो के ब्लॉग में पाया गया):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
मैंने इस पर एक ब्लॉग पोस्ट किया:
यदि आप इस मुद्दे पर अपडेट होना चाहते हैं, तो ब्लॉग पोस्ट के अनुसार एक नज़र डालें: Google Chrome में बदसूरत फ़ॉन्ट रेंडरिंग को कैसे ठीक करें । अगर इस पर कोई खबर है तो मैं खबर पोस्ट करूंगा।
मेरा मूल उत्तर:
यह Google Chrome में एक बड़ा बग है और Google Chrome टीम को इसके बारे में पता है, आधिकारिक बग रिपोर्ट यहां देखें । वर्तमान में, मई 2013 में, बग की रिपोर्ट किए जाने के 11 महीने बाद भी, यह हल नहीं हुआ है। यह एक अजीब बात है कि Google Webfonts को गड़बड़ करने वाला एकमात्र ब्राउज़र Google का अपना ब्राउज़र Chrome (!) है। लेकिन एक सरल समाधान है जो समस्या को ठीक करेगा, कृपया समाधान के लिए नीचे देखें।
GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013 से स्टेटमेंट
बग रिपोर्ट टिप्पणियों में आधिकारिक बयान:
हमारे विंडोज फॉन्ट रेंडरिंग पर सक्रिय रूप से काम किया जा रहा है। ... हमें उम्मीद है कि मील के पत्थर या दो के भीतर कुछ ऐसा होगा जिससे डेवलपर्स खेलना शुरू कर सकते हैं। यह कितनी तेजी से स्थिर होता है, हमेशा की तरह, इस बारे में कि हम कितनी तेजी से जड़ जमा सकते हैं और किसी भी प्रतिगमन को जला सकते हैं।