font-size बटन और लिंक

Question

के लिए मैं इस साधारण एचटीएमएल की कोशिश की:

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a> 

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

Answer 1

फ़ॉन्ट-आकार समान है। लेकिन यह दिखता है क्योंकि डिफ़ॉल्ट पृष्ठ फ़ॉन्ट डिफ़ॉल्ट इनपुट-फ़ील्ड फ़ॉन्ट से अलग है। दोनों तत्वों पर font-family सेट करें और वे वही देखेंगे।

मैं आमतौर पर करते हैं:

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
} 

पेज और प्रपत्र फ़ील्ड्स से अधिक संगत फोंट प्राप्त करने के लिए।

Answer 2

आपको बटन के लिए अधिक सीएसएस का उपयोग नहीं करना चाहिए, क्योंकि उनका प्रदर्शन उपयोगकर्ताओं के ऑपरेटिंग सिस्टम पर निर्भर करता है।

इसके बजाय आप उदाहरण छवियों के लिए उपयोग कर सकते हैं।

Answer 3

, मेरे लिए एक ही लग रहा है Firefox, IE6 और क्रोम पर परीक्षण किया: http://jsbin.com/oveze
कृपया ध्यान रखें:

• यह ब्राउज़र और उसके चूक पर निर्भर करता है, और ऑपरेटिंग के आधार पर भी अलग हो सकता है प्रणाली।
• अक्सर बटन और इनपुट फ़ील्ड के लिए एक अलग फ़ॉन्ट होता है। इसे भी सेट करें।
• एंटी-एलियासिंग या क्लियरटाइप आपके पास समान रंग (पृष्ठभूमि और फ़ॉन्ट) नहीं होने पर थोड़ा अंतर पैदा कर सकता है।

Answer 4

क्रोम में एक ही समस्या थी, बाद में पता लगा है कि कुंजी कारण

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

यह तय करने के लिए

body { 
    -webkit-font-smoothing: antialiased 
} 

यह बदल गया था।