क्या Google Chrome में कोई "फ़ॉन्ट स्मूथिंग" है?

Question

मैं Google webfonts का उपयोग कर रहा हूं और वे सुपर बड़े फ़ॉन्ट आकारों में ठीक हैं, लेकिन 18px में, वे भयानक दिखते हैं। मैंने यहाँ और वहाँ पढ़ा है कि फॉन्ट स्मूथिंग के लिए समाधान हैं, लेकिन मुझे ऐसा कोई भी नहीं मिला है जहाँ यह स्पष्ट रूप से समझाता हो और कुछ स्निपेट जो मैंने पाए हैं वे बिल्कुल भी काम नहीं करते हैं।

मेरा h4हर ब्राउज़र में बहुत भयानक लग रहा है, लेकिन क्रोम सबसे खराब है। क्रोम में, मेरे बहुत सारे फोंट भयानक दिखते हैं।

क्या कोई मुझे सही दिशा दिखा सकता है? शायद आप एक ऐसे संसाधन के बारे में जानते हैं जो इसे स्पष्ट रूप से समझाता है। धन्यवाद!

उदाहरण SCREENSHOT # 1

यह स्क्रीनशॉट https://www.dartlang.org/ , एक प्रोग्रामिंग भाषा का मुखपृष्ठ दिखाता है जो Google द्वारा बनाई गई है (इसलिए हम यह अनुमान लगा सकते हैं कि यह वेबसाइट Google द्वारा भी बनाई गई है) और Google Webfonts का उपयोग करता है।

स्क्रीनशॉट बाईं ओर Google Chrome, दाईं ओर फ़ायरफ़ॉक्स / इंटरनेट एक्सप्लोरर दिखाता है।

उदाहरण SCREENSHOT # 2

यह स्क्रीनशॉट एडोब डॉट कॉम पर एक उत्पाद जानकारी पृष्ठ दिखाता है, टाइपटेक द्वारा प्रदान किए गए वेबफोन्स का उपयोग करते हुए। जब फोंट की बात आती है तो Adobe & Typekit पेशेवर होते हैं।

स्क्रीनशॉट दाईं ओर Google Chrome, बाईं ओर फ़ायरफ़ॉक्स / इंटरनेट एक्सप्लोरर दिखाता है:

Comments

वे मुझे क्रोम और फ़ायरफ़ॉक्स में अच्छे लगते हैं ... क्या आप एक प्रिंटस्क्रीन जोड़ सकते हैं?

— JFK

इसके अलावा iPhone / iOS पर वे बहुत अच्छे लगते हैं।

— putusernamehere

क्या आप विंडोज का उपयोग कर रहे हैं? यदि हां, तो OS का क्लियर टाइप स्मूथिंग इंजन इसका कारण हो सकता है। मैंने उस पेज को विंडोज के अलावा मैक ओएस, उबंटू, फेडोरा और क्रोम ओएस में देखने की कोशिश की है; उत्तरार्द्ध केवल एक ही है जो ठीक से प्रस्तुत नहीं करता है, क्योंकि मुझे संदेह है कि क्लियरटाइप इंजन है।

— जूल्स

हाँ, यह विंडोज़ है। क्या आप जानते हैं कि मैं इसके बारे में क्या कर सकता हूं?

— imakeitpretty

बस इस उपयोगी सुविधा की खोज की: क्रोम: // झंडे / # एलसीडी-पाठ-आ - इसे सक्षम करें और यह आपके लिए पाठ को सुचारू करता है

— सिनेक

Answer 1

मुद्दे की स्थिति, जून 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 से स्टेटमेंट

बग रिपोर्ट टिप्पणियों में आधिकारिक बयान:

हमारे विंडोज फॉन्ट रेंडरिंग पर सक्रिय रूप से काम किया जा रहा है। ... हमें उम्मीद है कि मील के पत्थर या दो के भीतर कुछ ऐसा होगा जिससे डेवलपर्स खेलना शुरू कर सकते हैं। यह कितनी तेजी से स्थिर होता है, हमेशा की तरह, इस बारे में कि हम कितनी तेजी से जड़ जमा सकते हैं और किसी भी प्रतिगमन को जला सकते हैं।

Comments

समस्या विंडोज पर चलने वाले सभी ब्राउज़रों में नहीं है, यह सिर्फ क्रोम के मामले में है। फ़ायरफ़ॉक्स, ओपेरा और IE में फोंट के उचित एंटी-अलियासिंग हैं। हालांकि, यह -webkit-font-smoothingसंपत्ति का उपयोग करके क्रोम में तय किया जा सकता है । नीचे मेरा जवाब देखें।

— कुशाग्र

काले पाठ के लिए, मैंने उपयोग किया text-shadow: #333 0px 0px 1px;। टिप के लिए बहुत बहुत धन्यवाद।

— योएन

हो सकता है कि यह अनुवाद में खो गया हो, लेकिन -webkit-text-स्ट्रोक केवल तभी काम करता है जब आप फ़ॉन्ट के रंग के अल्फा का उपयोग करते हैं। इसलिए एक काले फ़ॉन्ट के लिए मैं "-webkit-text-स्ट्रोक: 1px rgba (0,0,0,0.1)" का उपयोग करता हूं।

— नझ्रोय

मैंने देखा है कि मैक पर क्रोम 30 अब एंटीएलियासिंग की उसी कमी को प्रदर्शित कर रहा है।

— jwadsack

इस समस्या के लिए क्रोम बोर्ड पर आधिकारिक टिकट में code.google.com/p/chromium/issues/detail?id=137692 यह है, अगर मैं सूत्र में undrestand सही ढंग से पिछले पोस्ट है v37 के लिए ठीक के रूप में करने के उद्देश्य से किया जा रहा है ।

— ग्रबेर

Answer 2

मुझे भी यही समस्या थी, और मुझे सैम गोडार्ड के इस पोस्ट में इसका हल मिला ,

समाधान अगर फ़ॉन्ट को कॉल को दो बार परिभाषित करने के लिए । पहले जैसा कि यह सिफारिश की जाती है, सभी ब्राउज़रों के लिए उपयोग किया जाना है, और केवल एक विशेष मीडिया क्वेरी के साथ क्रोम के लिए एक विशेष कॉल के बाद:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

इस विधि से फ़ॉन्ट सभी ब्राउज़रों में अच्छा प्रस्तुत करेगा। केवल नकारात्मक बिंदु जो मैंने पाया कि फ़ॉन्ट फ़ाइल भी दो बार डाउनलोड की जाती है।

आप इस लेख का एक स्पेनिश संस्करण मेरे पेज में पा सकते हैं

Comments

यह वास्तव में सही उत्तर है, हालांकि इसे सरल बनाया जा सकता है। बस फोंट की सूची में एसवीजी संस्करण एफआईआरएसटी को सूचीबद्ध करने से समस्या हल हो जाती है!

— jduncanator

यह उत्तर देता है - अब तक - सर्वोत्तम परिणाम। SVG फॉन्ट, x100, -webkit-text-स्ट्रोक हैक से बेहतर दिखता है। मुख्य नकारात्मक पहलू एसवीजी संस्करण का फ़ॉन्ट-आकार है; यह सामान्य रूप से बहुत बड़ा है :-( Google को वास्तव में इस

— छंटनी

मैं पूरी तरह सहमत हूँ ! मैं इस उत्तर को अपने उत्तर के भीतर से जोड़ूंगा।

— सालीक

@jduncanator एसवीजी को पहले सूचीबद्ध करना उचित नहीं है - इसका मतलब है कि एसवीजी फ़ॉन्ट हर एक ब्राउज़र द्वारा लोड किया जाएगा जो इसका समर्थन करता है, जबकि आपको बस विंडोज पर क्रोम के लिए इसकी आवश्यकता होती है।

— RoelN

@jduncanator दो मुख्य अपराधी कोई हिंटिंग सपोर्ट नहीं हैं और बड़ी फाइलें (फोंट के लिए gzip संपीड़न कई सर्वर पर डिफ़ॉल्ट रूप से सक्षम नहीं हैं)।

— RoelN

Answer 3

Chrome फ़ायरफ़ॉक्स या किसी अन्य ब्राउज़र जैसे फोंट को रेंडर नहीं करता है। यह आमतौर पर केवल विंडोज पर क्रोम चलाने में एक समस्या है। यदि आप फोंट को सुचारू बनाना चाहते -webkit-font-smoothingहैं h4, तो इस तरह से येर टैग पर संपत्ति का उपयोग करें।

h4 {
    -webkit-font-smoothing: antialiased;
}

आप इसका उपयोग भी कर सकते हैं subpixel-antialiased, यह आपको विभिन्न प्रकार के चौरसाई (पाठ को थोड़ा धुंधला / छायांकित) बना देगा। हालांकि, प्रभावों को देखने के लिए आपको एक रात के संस्करण की आवश्यकता होगी। आप फ़ॉन्ट चौरसाई के बारे में अधिक सीख सकते हैं यहां ।

Comments

मेरे पास नवीनतम संस्करण Chrome आज 8-feb-2013 है और यहाँ यह पृष्ठ उनके बीच कोई अंतर नहीं दिखाता है maxvoltar.com/sandbox/fontsmoothing

— thednp

यह काम नहीं करता है (खिड़कियों पर परीक्षण)। जैसा कि मैक ऐसा करते हैं, वैसे भी मैं लोगों को इसका उपयोग करने से रोकने के लिए चिह्नित करता हूं।

— क्रिप्टोनाइटडेव

यह काम नहीं करता। मैंने अभी इसे विंडोज 8 पर आजमाया है। क्रोम के नवीनतम संस्करण के साथ (10/8/2013 तक)।

— jay_t55

Mac Chrome और Safari पर यह कार्य करता है इसलिए इसे जोड़ने योग्य है। Apple.com यहां तक ​​कि अपने base.css स्टाइलशीट में भी इसका इस्तेमाल करता है:body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }

— जस्टिन

फ़ायरफ़ॉक्स समतुल्य है -मोज़-ऑक्स-फॉन्ट-स्मूथिंग: ग्रेस्केल;

— जेफ वाल्टर्स

Answer 4

ठीक है आप इसे बस उपयोग कर सकते हैं

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

सुनिश्चित करें कि आपके पाठ का रंग और ऊपरी पाठ-स्ट्रोक-चौड़ाई मुझे एक ही चाहिए और यही है।

Comments

फॉन्ट स्मूथिंग अब कुछ नहीं करता है लेकिन टेक्स्ट स्ट्रोक काम करता है और कुछ फोंट पर मदद कर सकता है। मुझे 0.5px स्ट्रोक और आरजीबीए (0,0,0,0.5) के साथ सबसे अच्छा परिणाम मिला।

— मॉस

फ़ायरफ़ॉक्स समतुल्य है -मोज़-ऑक्स-फॉन्ट-स्मूथिंग: ग्रेस्केल;

— जेफ वाल्टर्स

यह अच्छा है ... बस # 34343b को इनहेरिट के साथ बदलें;)

— Sagive SEO

Answer 5

मैं इससे पहले कहूंगा कि यह हमेशा काम नहीं करेगा , मैंने इसे sans-serifफ़ॉन्ट और बाहरी फ़ॉन्ट जैसे परीक्षण किया हैopen sans

कभी-कभी, जब आप विशाल फोंट का उपयोग करते हैं, तो लगभग font-size:49pxऔर ऊपरी के लिए प्रयास करें

यह एक हेडर टेक्स्ट है जिसका साइज़ 48px है ( font-size:48px;उस तत्व में जिसमें टेक्स्ट होता है)।

लेकिन, अगर आप 48px को font-size:49px;(और 50px, 60px, 80px, आदि ...), कुछ दिलचस्प होता है

पाठ स्वचालित रूप से सुचारू हो जाता है, और वास्तव में अच्छा लगता है

एक और पक्ष के लिए ...

यदि आप छोटे फोंट की तलाश कर रहे हैं, तो आप यह कोशिश कर सकते हैं, लेकिन बहुत प्रभावी नहीं है।

पाठ के माता-पिता के लिए, बस अगली सीएसएस संपत्ति लागू करें: -webkit-backface-visibility: hidden;

आप कुछ इस तरह से बदल सकते हैं:

इसके लिए:

(फ़ॉन्ट है Kreon)

विचार करें कि जब आप उस संपत्ति को नहीं डाल रहे हैं, -webkit-backface-visibility: visible;तो विरासत में मिली है

लेकिन सावधान रहें , यह अभ्यास हमेशा अच्छे परिणाम नहीं देगा, अगर आप ध्यान से देखें, तो क्रोम सिर्फ टेक्स्ट को थोड़ा धुंधला दिखता है।

एक और रोचक तथ्य:

-webkit-backface-visibility: hidden;Chrome में किसी पाठ को रूपांतरित करने पर भी काम करेगा ( -webkit-transformसंपत्ति के साथ , जिसमें घुमाव, स्काइज़, आदि शामिल हैं)

के बिना -webkit-backface-visibility: hidden;

साथ में -webkit-backface-visibility: hidden;

खैर, मुझे नहीं पता कि यह अभ्यास क्यों काम करता है, लेकिन यह मेरे लिए है। मेरे अजीब अंग्रेजी के लिए क्षमा करें।