एक आइकन फ़ॉन्ट (फ़ॉन्ट विस्मयकारी) का उपयोग करना थोड़ा धुंधला और बहुत बोल्ड दिखता है

Question

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

यहाँ प्रदर्शित करने के लिए एक छवि है:

आप देख सकते हैं, फ़ॉन्ट वास्तव में अच्छा लग रहा है और रेटिना पर crispt प्रदर्शित आइपॉड टच, लेकिन आईमैक पर, यह एक तरह से भद्दा है।

इसका कारण क्या है? क्या यह विरोधी एलियासिंग के साथ क्या करना है? क्या मैं इस बारे में कुछ कर सकता हूं?

Answer 1

इस तरह की समस्याएं एंटी-एलियासिंग या संकेत से संबंधित हैं। अगर वे छोटे आकारों पर अच्छा दिखने की उम्मीद करते हैं तो फ़ॉन्ट्स को किसी प्रकार के ग्रिड पर गठबंधन करने की आवश्यकता होती है। गिटहब लोगों ने एक महान blog post लिखा कि कैसे उन्होंने अपने कस्टम फ़ॉन्ट में सफाई को प्रबंधित किया।

मैं इसे ग्रिड पर संरेखित करने और गिटहब लोगों के चरणों में अनुसरण करने का प्रयास करूंगा। उन्होंने अपने प्रतीक पर अच्छा काम किया।

इसके अलावा: क्या आईपॉड टच और आईमैक के बीच आइकन अलग-अलग आकार हैं, या यह कि विभिन्न डीपीआई सेटिंग्स का दुष्प्रभाव है? फ़ॉन्ट प्रतिपादन के साथ यह चिंता भी हो सकती है।

यदि संभव हो, तो अपनी डीपीआई सेटिंग्स के साथ खेलें। मैं मैक का उपयोग नहीं करता, इसलिए मुझे नहीं पता कि उन सेटिंग्स को कैसे बदला जाए। यह अभी भी अंतर्निहित ग्रिड मुद्दे को ठीक नहीं करेगा। क्या आप प्रश्न में फ़ॉन्ट्स को संपादित करने में सक्षम हैं? कि कुछ ब्राउज़र एक साहसिक का अनुकरण करने की कोशिश

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit 
-webkit-font-smoothing : none | subpixel-antialiased | antialiased 

Answer 2

@ sporkbox के जवाब देने के लिए जोड़ा जा रहा है, यदि आप वेबकिट ब्राउज़र के बारे में विशेष रूप से चिंतित हैं, वहाँ निम्नलिखित सीएसएस विकल्प हैं आप का उपयोग करने के लिए चुन सकते हैं फ़ॉन्ट चेहरे जब लाइनों को मोटा बनाकर कोई बोल्ड वेट उपलब्ध नहीं होता है, जिसके परिणामस्वरूप आप जिस स्थिति का वर्णन कर रहे हैं उसमें कुछ ऐसा होता है। क्या आप वाकई कहीं ऐसा दिखाई देते हैं जहां आपके पास font-weight: normal; है?

Answer 3

मैंने पाया:

Answer 4

उपयोग सीएसएस फ़ॉन्ट समरेखण:

-webkit-font-smoothing: antialiased; 

Answer 5

-webkit-परिप्रेक्ष्य: 1000;

यह तय करने के लिए मुझे

Answer 6

वहाँ एक अजीब चाल है कि कुछ समय काम करता है, की कोशिश:

-webkit-transform:rotateZ(0); 
-moz-transform:rotateZ(0); 
-o-transform:rotateZ(0); 
transform:rotateZ(0); 

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

Answer 7

बेस्ट पार ब्राउज़र समाधान है:

.your_font_class{ 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

Answer 8

समाधान थोड़े पहले उल्लेख किया है में से कुछ/sorta चाल थी, लेकिन क्या यह तय मुझे (बाहर टिप्पणी) "पिता का फ़ॉन्ट आकार विरासत को दूर करने के लिए किया गया था "फ़ॉन्ट-awesome.css के अंदर वर्ग (और फ़ॉन्ट-awesome.min।सीएसएस):

font-size: inherit; 

वर्ग के अंतिम परिणाम इस प्रकार है:

.fa { 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    /* font-size: inherit; */ 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

इस के अलावा, मैं, क्योंकि वे बहुत दूर बाहर टिप्पणी करके नीचे धक्का दे दिया हो रहे थे बड़े प्रतीक को समायोजित करने के लिए किया था "पिता-एलजी" वर्ग से इस लाइन:

vertical-align:-15% 

वर्ग इस

.fa-lg { 
    font-size: 1.33333333em; 
    line-height: 0.75em; 
    /* vertical-align: -15%; */ 
} 

तरह लग रहा है

मैं फ़ॉन्ट विस्मयकारी 4.7.0