सीएसएस: @ फ़ॉन्ट-फेस एंटी एलियासिंग

Question

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

मेरे सीएसएस कोड:

@font-face { 
font-family: 'YanoneKaffeesatzThin'; 
src: url('../fonts/yanonekaffeesatzthin-webfont.eot'); 
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg'); 
font-weight: normal; 
font-style: normal;} 

क्या छोड़ दिया है यह पिछले है, लेकिन anoying, मुद्दा दूर जाना बनाने के लिए करना है?

Answer 1

CSS3 के साथ, आप font-smooth संपत्ति का उपयोग कर सकते हैं, हालांकि एंटीअलाइजिंग अभी भी सिस्टम डिफ़ॉल्ट द्वारा नियंत्रित की जाएगी। यदि आपको वास्तव में एक साफ एंटीअलाइजिंग को मजबूर करने की आवश्यकता है चाहे ओएस क्या हो, चाहे आपको एसआईएफआर का उपयोग करना पड़े जो स्वचालित रूप से फ्लैश घटक के साथ पाठ को प्रतिस्थापित करता है।

Answer 2

यह भी देखें: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

सार है कि text-shadow: 0 0 1px rgba(0,0,0,0.3); जोड़ने विरोधी aliasing की उपस्थिति देता है।

Answer 3

Cufon और Typeface.js दो समाधान हैं जो इस थ्रेड में चर्चा किए गए एचटीएमएल 5, CSS3 और जेएस समाधानों को समेकित और स्वच्छ करते हैं।

प्रत्येक में एक कनवर्टर है जो फ़ॉन्ट फ़ाइलों (ttf, otf, wotf) को उन स्क्रिप्ट में परिवर्तित करने की इजाजत देता है जो आप करने की कोशिश कर रहे हैं - वेब पर किसी भी फ़ॉन्ट को वितरित करें, एंटीअलाइज्ड।

दो के

, मैं antialias से निपटने के लिए एक नहीं तो आम CSS नियम के बारे में Cufon http://cufon.shoqolate.com/generate/

Answer 4

बस एक छोटी टिप्पणी पसंद करते हैं।

-webkit-font-smoothing: antialiased; 

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

-webkit-font-smoothing: subpixel-antialiased; 
-webkit-font-smoothing: none; 

एक डेमो पेज: http://maxvoltar.com/sandbox/fontsmoothing/

नहीं भूल जाते हैं https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Answer 5

आप WOFF को OTF बदलने की आवश्यकता: - (! वर्क्स)

---

OTF> WOFF

टीटीएफ -> ओटीएफ -> डब्ल्यूओएफएफ (काम करता है!)

TTF -> WOFF (Google Fonts में antialising, आम गलती काम नहीं करता)

---

1º) डाउनलोड OTF font version

1º वैकल्पिक) यदि फ़ॉन्ट अन्य है और है टीटीएफ, कन्वर्ट यह WOFF https://everythingfonts.com/otf-to-woff को

---

2º साथ OTF करने के लिए) OTF कन्वर्ट

केवल WOFF का उपयोग ईओटी, एसवीजी, डब्ल्यूओएफएफ 2, आदि का उपयोग करें ..