सीएसएस टेक्स्ट

Question

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

फ़ॉन्ट को 'सामान्य' बनाने के लिए इसे फोड़ा जाता है, फ़ॉन्ट आकार को बड़ा होना चाहिए (जैसे 40px +)।

यदि आप आइकन को 15px ऊंचाई की जगह में फिट करने का प्रयास कर रहे हैं, तो फ़ॉन्ट आकार 40px होगा और फिर उस अतिरिक्त स्थान को आपसे निपटने की आवश्यकता है।

मैंने प्रत्येक कल्पनीय संयोजन में स्पष्ट ऊंचाई, स्पष्ट लाइनहाइट, लंबवत-संरेखण सेट करने का प्रयास किया है, और परिणाम पीसी और मैक के बीच differenct है।

एकमात्र चीज जिसे मैं सोच सकता हूं वह यह है कि 'बचे हुए स्थान' को विभिन्न ऑपरेटिंग सिस्टम द्वारा अलग-अलग संभाला जाता है।

क्या कोई सीएसएस संपत्ति है जिसे मुझे पता नहीं है कि इससे ठीक हो जाएगा?

पीसी

मैक

यह बहुत hackish सीएसएस मैं कोशिश करते हैं और के रूप में सबसे अच्छा मैं कर सकता इसे बाहर शून्य करने के लिए इस्तेमाल होता है। ध्यान रखें कि मैंने ऊंचाई और लाइनहाइट के साथ पहले से ही खेलने की कोशिश की है, यह हमेशा एक ही समस्या है, पीसी हमेशा इसे नीचे रखता है जहां मैक इसे रखता है।

.icon { 
    font-family: 'entypo'; 
    display: inline-block; 
    color: #000; 
    font-size: 40px; 
    line-height: 0; 
    height: 0; 
    vertical-align: middle; 
} 

ऊपर उन छवियों की खातिर तुम लोगों को डेमो के लिए के लिए, इन गुणों मैं जोड़ा हैं: height: 20px; width: 20px; background: red; केवल प्रदर्शित करने के लिए कि यह कैसे इतना भिन्न रूप से प्रस्तुत।

Answer 1

मुझे एक ही समस्या है। मुझे यकीन नहीं है कि मेरा समाधान इतना बढ़िया है, लेकिन मैं यह देखने के लिए पोस्ट करूंगा कि क्या हम कुछ चर्चा शुरू कर सकते हैं।

.icon { 
    font-family: 'Entypo'; 
    position: absolute; 
    font-size: 40px; 
    height: 20px; 
    width: 20px; 
    margin-left: -20px; /* This will force it to live before the containing element, so the container may need 20px of padding-left */ 
    margin-top: -1px; /* Just because it was still sitting one pixel to low for my eye */ 
    text-align: center; 

}

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

Answer 2

एचटीएमएल देखना अच्छा लगेगा, लेकिन शायद 0 पैडिंग मदद करेगा, padding:3px; कहें।

Answer 3

बग jQuery के साथ तय हो गई है;)

बस पृष्ठ पर इस जोड़ें:

<script> 
$(document).ready(function(){ 
var isMacLike = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i)?true:false; 
var isIOS = navigator.platform.match(/(iPhone|iPod|iPad)/i)?true:false; 

if(isMacLike || isIOS) 
    {  
     //alert("mac!!!"); 
     $(".entypoclass").css("margin-top","11px"); 
    } 
    else 
     { 
      // alert("pc!"); 
     } 
}); 
</script> 

Answer 4

Entypo's डिफ़ॉल्ट line-height में गड़बड़ है।

सौभाग्य से, Fontello पर किसी ने इसे ठीक करने में कुछ समय बिताया है। यह काम करता हैं।

Answer 5

मेरे समाधान है:

icon{ 
    line-height:0px; 
    overflow:hidden; 
    display:inline-block; 
    font-size:75px; 
    font-family:'entypo'; 
    text-align:center; 
    height:37px; 
    width:37px; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased 
}