फ़ायरफ़ॉक्स और ओपेरा में वेबफॉन्ट स्मूथिंग और एंटीएलियासिंग

112

मैंने अपनी साइट पर कस्टम-निर्मित वेब फोंट का उपयोग किया है। मेरे रेंडरिंग स्टाइल को स्टाइल करने के लिए, मैंने निम्नलिखित कोड का उपयोग किया:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

यह सफ़ारी और क्रोम पर ठीक काम करता है (किनारों को तेज और लाइनें पतली हैं)। क्या फ़ायरफ़ॉक्स और ओपेरा पर एक ही शैली को लागू करने का कोई तरीका है?

— मैट
स्रोत

5

यह एक अच्छा विचार होगा कि आप ऐसा करना बंद कर दें और पढ़ें कि यहाँ क्यों: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

— फ्रीगर्ल

20

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

— डायलन

1

यह पूरी तरह से एक व्यापक सामान्यीकरण नहीं है। लेख में कहा गया है कि सबपिक्सल प्रतिपादन मुख्य रूप से अंधेरे पृष्ठभूमि पर हल्के पाठ को और अधिक पठनीय (यानी सुलभ) बनाने के लिए था, और एक व्यापक सीएसएस परिभाषा बनाना जैसे body { -webkit-font-smoothing: antialiased; }कि बहुत भारी-हाथ वाला है।

— मैट शेयूरिच

3

मेरे वेब फोंट जो प्रकाश पृष्ठभूमि पर अंधेरे हैं, साथ ही "अशुद्ध बोल्ड" हो रहे हैं। मैं कहता हूँ "antialiased" चारों ओर।

— जेसन टी फेदरिंगम

5

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

— बीजर

193

चूंकि ओपरा 15000 ब्लिंक द्वारा संचालित है, क्योंकि संस्करण 15.0 -webkit-font-smoothing: antialiasedओपेरा पर भी काम करता है।

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

-moz-osx-font-smoothing: grayscale;

यह धुंधली आइकन फोंट या अंधेरे पृष्ठभूमि पर प्रकाश पाठ को ठीक करना चाहिए।

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

आप OSX पर फ़ॉन्ट रेंडरिंग के बारे में मेरी पोस्ट पढ़ सकते हैं जिसमें दोनों गुणों को संभालने के लिए एक सैस मिश्रण शामिल है।

— मैक्सिमिलियन हॉफमैन
स्रोत

6

OSX ही क्यों ??

— यासिर एनाज़क

7

विंडोज़ और लिनक्स OSX की तुलना में फोंट के लिए अलग-अलग रेंडरिंग एल्गोरिदम का उपयोग करते हैं।

— मैक्सिमिलियन हॉफमैन

15

खैर, फ़ायरफ़ॉक्स ऐसा कुछ समर्थन नहीं करता है।

मोज़िला से संदर्भ पृष्ठ में निर्दिष्ट किया गया है font-smoothक्योंकि सीएसएस संपत्ति फोंट रेंडर किए जाने पर एंटी-अलियासिंग के आवेदन को नियंत्रित करती है, लेकिन इस संपत्ति को इस विनिर्देश से हटा दिया गया है और वर्तमान में मानक ट्रैक पर नहीं है।

यह संपत्ति केवल वेबकिट ब्राउज़र में समर्थित है।

यदि आप एक विकल्प चाहते हैं तो आप इसकी जांच कर सकते हैं:

— जोनाथन नागिन
स्रोत

2

खैर, मेरे पास समस्या यह है कि मेरे फोंट "बोल्ड" दिखते हैं और फ़ायरफ़ॉक्स और ओपेरा में फूला हुआ है। इसके साथ -webkit-font-smoothing:antialiased;मैं इसे सफारी और क्रोम में ठीक कर सकता था। मैं अपने फोंट को फ़ायरफ़ॉक्स में थोड़ा हल्का बनाने के लिए कोई "हैक" ढूंढना पसंद करूँगा। मैंने text-shadowकेवल मोज में एक सफेद को लागू करने के बारे में सोचा था लेकिन "इनसेट" पाठ-छाया को लागू करने का कोई तरीका नहीं है जो फ़ॉन्ट को हल्का बना देगा।

— मैट

1

@matt आप इस प्रश्न में कुछ CSS सलाह आज़मा सकते हैं: stackoverflow.com/questions/761778/… हो सकता है कि आपको कोई CSS विकल्प मिले।

— जोनाथन नागिन

11

केस: डार्क बैकग्राउंड फायरफॉक्स (v35) / विंडोज
उदाहरण: गूगल वेब फॉन्ट रूडा पर जग्गी वेब फॉन्ट वाला लाइट टेक्स्ट

आश्चर्यजनक समाधान -
निम्नलिखित चयनकर्ताओं के लिए संपत्ति जोड़ना:

selector {
    text-shadow: 0 0 0;
}

वास्तव में, परिणाम सिर्फ उसी के साथ है text-shadow: 0 0;, लेकिन मुझे स्पष्ट रूप से धुंधला-त्रिज्या सेट करना पसंद है।

यह एक सार्वभौमिक समाधान नहीं है, लेकिन कुछ मामलों में मदद कर सकता है। इसके अलावा मैंने अब तक इस समाधान के नकारात्मक प्रदर्शन प्रभावों का भी अनुभव नहीं किया है।

— वोल्कर ई।
स्रोत

मदद करने में कुछ नहीं करता है

— vsync

यह फॉन्ट के आधार पर क्रोम पर bolder फॉन्ट का कारण बनेगा

— Ben Sewards

1

@BenSewards क्या आप एक फ़ॉन्ट प्रदान करेंगे जहाँ आप bolder फॉन्ट रेंडरिंग में भाग लेंगे? या शायद एक CodePen भी? अग्रिम में धन्यवाद।

— वोल्कर ई।

1

@VolkerE। महान समाधान के लिए धन्यवाद। मैं एक ही हैडर में स्रोत कोड प्रो फ़ॉन्ट के साथ एक ही कष्टप्रद समस्या है। जब मैं स्क्रॉल करता हूं तो फ़ॉन्ट बहुत छोटा हो जाता है और आपकी टेक्स्ट-छाया के साथ फ़ॉन्ट को कोई समस्या नहीं होती है।

— इवोलिटियो

वर्तमान क्रोम (58.0.3029.110) पर "सुचारू" पाठ वास्तव में वास्तव में भयानक लग रहा है। ("दांतेदार" पाठ कुछ बेहतर है)

— RecursiveExceptionException

7

इस मुद्दे को चलाने के बाद, मुझे पता चला कि मेरी WOFF फाइल ठीक से नहीं हुई थी, मैंने FontSquirrel को एक नया TTF भेजा, जिसने मुझे एक उचित WOFF दिया, जो फ़ायरफ़ॉक्स में बिना किसी अतिरिक्त CSS को जोड़े सहज था।

— azenet
स्रोत

क्या यह विंडोज़ में है?

— विग्नेश

5

मुझे इस लिंक के साथ समाधान मिला: http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

कदम विधि द्वारा:

अपने फ़ॉन्ट को एक WebFontGenerator पर भेजें और ज़िप प्राप्त करें
ज़िप फ़ाइल पर TTF फ़ॉन्ट ढूंढें
फिर, linux पर, इस कमांड को करें (या इसके द्वारा स्थापित करें apt-get install ttfautohint):
ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
फिर, एक और, WebFreGenerator पर नई TTF फ़ाइल (neosansstd-black.changed.ttf) भेजें
आप अपने सभी webfonts के साथ एक आदर्श ज़िप प्राप्त करते हैं!

मुझे उम्मीद है कि इससे सहायता मिलेगी।

— प्लिसी स्टीफन
स्रोत

सीएसएस-संक्रमण के दौरान फ़ॉन्ट जॉगिंग को ठीक करने में एक महान काम किया (हालांकि इसे पूरी तरह से हटाया नहीं गया)। मैंने TTFAutohint विकल्प के साथ FontSquirrel जनरेटर का उपयोग किया

— एंड्री

मैंने विंडोज सक्षम के लिए ऑटोहिंट के साथ अपने WOFF, WOFF2, EOT और SVG फ़ाइलों को फिर से बनाने के लिए Fontie का उपयोग किया।

— डोमिनिक

4

... बॉडी टैग में और ये सामग्री और टाइपफेस से सामान्य रूप में बेहतर लगते हैं ...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}

— user3634787
स्रोत

2

मुझे क्षमा करें ... "पुनर्विचार" क्या है? हम में से अधिकांश जर्मन नहीं बोलते हैं, इसलिए यदि आप अपनी पूरी पोस्ट अंग्रेजी में बनाते हैं तो अच्छा होगा।

— रियरींगेंग

3

ओह प्लीज, मैंने माफी मांगी है कि गूगल और किसी भी तरह से गलत शब्द का अनुवाद किया गया है

— उपयोगकर्ता 3634787

3

जब पाठ का रंग गहरा होता है, तो सफारी और क्रोम में, मेरे पास टेक्स्ट-स्ट्रोक सीएसएस संपत्ति के साथ बेहतर परिणाम होता है।

-webkit-text-stroke: 0.5px #000;

— क्रिस्टेल
स्रोत

सवाल फ़ायरफ़ॉक्स और ओपेरा के बारे में है। इसलिए इस जवाब का सवाल से कोई लेना-देना नहीं है

— vsync

-4

जोड़ा जा रहा है

font-weight: normal;

आपके @ फॉन्ट-फेस फोंट फ़ायरफ़ॉक्स में बोल्ड उपस्थिति को ठीक कर देंगे।

— हारून आठवीं
स्रोत

7

font-weight(अनिश्चित रूप से) फ़ॉन्ट भार को प्रभावित करता है, फ़ॉन्ट चौरसाई नहीं। इसे @ फॉन्ट-फेस डिक्लेरेशन में जोड़ने से कन्फ्यूजन हो जाएगा अगर लिंक्ड फॉन्ट फाइल नॉर्मल-वेट फॉन्ट फाइल नहीं है।

— माइक मेयर

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

— ड्यूडवाड

वास्तव में, फ़ॉन्ट चेहरे का नाम ही डिफ़ॉल्ट रूप से फ़ॉन्ट के वजन को निरूपित करना चाहिए ...!

— दुदिवद २ d

@dewewad यह बहुत अच्छा है कि आप सहमत हैं, और हाँ, यह एक सभ्य (हालांकि बल्कि शब्द-रहित) "प्रो-टिप" के बारे में है font-weight। बात यह है कि, ओपी के बारे में नहीं पूछ रहा font-weightथा-वह एंटीएलियासिंग के बारे में पूछ रहा था । यह पूरी तरह से अलग प्रश्न के लिए एक सही उत्तर है।

— माइक मेयर

@ मायमेयर आप पूरी तरह से सही हैं। मैं कभी-कभी थोड़ा दूर हो जाता हूं। ;)

— दुडेवद