<input> <body> से फ़ॉन्ट इनहेरिट नहीं करता है

102

मेरे पास इनपुट और लेबल फ़ील्ड हैं:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

और सीएसएस:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

जब कोड फ़ायरफ़ॉक्स में खुलता है तो फोंट समान नहीं होते हैं। फायरबग से पता चलता है कि दोनों को "विरासत" चाहिए और जब मैं गणना पर गौर करता हूं तो पता चलता है कि लेबल वर्दाना का उपयोग करता है। हालाँकि इनपुट से पता चलता है कि यह "MS Shell Dlg" का उपयोग करता है।

क्या कोई समझा सकता है कि क्या हो रहा है और यह सामान्य सीएसएस नियमों का पालन क्यों नहीं करता है?

css

— जूडी आर
स्रोत

यह बहुत दुख की बात है कि वे नहीं हैं। मुझे लगता है कि W3C ने फैसला किया था कि उन्हें सिस्टम के डिफॉल्ट के रूप में स्टाइल करने के लिए छोड़ना बेहतर होगा, क्योंकि उन पर अपनी खुद की ब्रोसवर्कर स्टाइल को मजबूर करने के बजाय

— vsync

125

यह डिफ़ॉल्ट रूप से इनहेरिट नहीं करता है, लेकिन आप इसे सीएसएस के साथ इनहेरिट करने के लिए सेट कर सकते हैं

input, select, textarea, button{font-family:inherit;}

डेमो: http://jsfiddle.net/gaby/pEedc/1/

— गेब्रियल पेट्रीओली
स्रोत

फ़ॉन्ट संपत्ति स्वचालित विरासत यदि इसका उल्लेख नहीं किया गया है, तो यहां देखें: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho, फॉर्म तत्वों के अलावा सभी तत्वों के लिए सही है, जो वर्तमान सिस्टम स्टाइल से विरासत में मिला है ताकि वे एक ऐसा एहसास बनाए रखें जो उपयोगकर्ता के लिए परिचित है ( डिफ़ॉल्ट रूप से ), लेकिन वे मैन्युअल रूप से अधिक उपयोग करने योग्य हैं।

— गैब्रियल पेट्रीओली

1

गलत या नहीं, जो फायरबग मुझे दिखा रहा था वह बहुत भ्रामक था: फ़ॉन्ट आकार 12, लेकिन गणना यह अभी भी 13.3333 हो गई। गैबी के उत्तर के अनुरूप फ़ॉन्ट-आकार सेट करने के बाद मेरी समस्या हल हो गई थी: O

— Jeroen

@ गेबी यह हमेशा इतना अच्छा होता है कि डिज़ाइनर हमारे लिए डेवलपर्स के लिए सारी सोच बनाते हैं ...;)

— एजीयूकेडलीगर्लड

इसके अलावा अगर आप inputअंदर डालते हैं label, तो labelटैग डिफ़ॉल्ट सीएसएस का वारिस नहीं करता है

— अमेरिकालिका

16

प्रपत्र आइटम (इनपुट्स / टेक्स्टारिया / आदि) फ़ॉन्ट जानकारी को इनहेरिट नहीं करते हैं। आपको उन वस्तुओं पर फ़ॉन्ट-परिवार सेट करना होगा।

— जॉन ग्रीन
स्रोत

@ झोन वाट उर कह सकता है कि बी सच हो सकता है, क्या इस बारे में कोई मानक / वैध दस्तावेज है ??

— diEcho

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

— इओनु

मेरा मतलब है फार्म तत्व। फिर भी नींद :)

— इयोनु स्टाइकु

@diEcho - ईमानदारी से, मैंने ऐनक के माध्यम से एक खोज की, और इसे कहीं भी नहीं बुलाया। 'संबंधित' को देखते हुए, और SO मुझे एक डुप्लिकेट प्रश्न लिंक दे रहा है: stackoverflow.com/questions/2874813 (जो मेरा जवाब देता है, हालांकि बिना किसी विशेष लिंक के भी)। Chrome में डिफ़ॉल्ट स्टाइलशीट फ़ॉन्ट को "-webkit-small-control;" के रूप में सूचीबद्ध करती है, जिसका अर्थ है कि यह पहले से ही शरीर को ओवरराइड कर रहा है, इसलिए शरीर पर सेट की गई चीज़ों की तुलना में अधिक विशिष्ट है। वही टीडी तत्वों के लिए जाता है, अगर मैं गलत नहीं हूँ। इसलिए मुझे नहीं पता कि इसके अलावा क्या कहना है "कि यह कैसे है।" :)

— जॉन ग्रीन

5

तीन साल बाद, मैं इसे अजीब लग रहा हूँ <input>प्रकार के तत्वों reset, submitऔर buttonवारिस नहीं है font-familyक्रोम या सफारी में। मुझे पता चला कि उन्हें पेडिंग भी नहीं मिलेगी।

लेकिन जब मैं कुछ गुणों के साथ गड़बड़ करता हूं, जैसे background, borderया यह अजीब appearanceसंपत्ति, तब font-familyऔर paddingप्रभाव होता है, लेकिन बटन का देशी रूप और अनुभव खो जाता है, जो कि बटन को पूरी तरह से बंद करने पर समस्या नहीं है।

यदि आप एक देशी दिखने वाला बटन चाहते हैं, तो विरासत में मिला है font-family, के <button>बजाय तत्व का उपयोग करें <input>।

कोडपेन देखें ।

— Stoutie
स्रोत

1

मुझे भी यही समस्या हुई है। मेरे लिए जो काम किया गया वह शैली को सीधे html में इनपुट तत्व में जोड़ रहा था। मैं रिएक्ट फि में कोडिंग कर रहा हूं।

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
स्रोत