<input> ไม่สืบทอดฟอนต์จาก <body>

103

ฉันมีช่องป้อนข้อมูลและป้ายกำกับ:

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

และ CSS:

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; }

เมื่อโค้ดเปิดขึ้นใน Firefox ฟอนต์จะไม่เหมือนกัน Firebug แสดงให้เห็นว่าทั้งคู่ "ควร" สืบทอดและเมื่อฉันดูจากการคำนวณพบว่าป้ายกำกับใช้ Verdana อย่างไรก็ตามอินพุตแสดงว่าใช้ "MS Shell Dlg"

มีใครอธิบายได้ไหมว่าเกิดอะไรขึ้นและทำไมดูเหมือนไม่ปฏิบัติตามกฎ CSS ปกติ

css

— จูดี้อาร์
แหล่งที่มา

มันน่าเศร้ามากที่พวกเขาไม่ ฉันเดาว่า W3C ได้ตัดสินใจแล้วว่ามันจะดีกว่าที่จะปล่อยให้พวกมันถูกจัดสไตล์ให้เป็นค่าเริ่มต้นของระบบแทนที่จะบังคับให้มีสไตล์แบบ broswer ของพวกเขาเอง

— vsync

128

จะไม่สืบทอดตามค่าเริ่มต้น แต่คุณสามารถตั้งค่าให้สืบทอดด้วย css

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

การสาธิต: http://jsfiddle.net/gaby/pEedc/1/

— Gabriele Petrioli
แหล่งที่มา

คุณสมบัติแบบอักษรสืบทอดโดยอัตโนมัติหากไม่ได้กล่าวถึงโปรดดูที่นี่: developer.mozilla.org/en/CSS/font

— diEcho

4

@diEcho สิ่งนี้เป็นจริงสำหรับองค์ประกอบทั้งหมดนอกเหนือจากองค์ประกอบแบบฟอร์มซึ่งสืบทอดมาจากรูปแบบระบบปัจจุบันดังนั้นพวกเขาจึงรักษาความรู้สึกที่คุ้นเคยกับผู้ใช้ ( โดยค่าเริ่มต้น ) แต่สามารถเขียนทับได้ด้วยตนเอง

— Gabriele Petrioli

1

ผิดหรือไม่สิ่งที่ Firebug แสดงให้ฉันรู้สึกสับสนมาก: ฟอนต์ขนาด 12 แต่คำนวณแล้วยังกลายเป็น 13.3333 หลังจากตั้งค่าขนาดตัวอักษรเพื่อสืบทอดแบบคล้ายคลึงกับคำตอบของ Gaby ปัญหาของฉันได้รับการแก้ไขแล้ว: O

— Jeroen

@Gaby เป็นเรื่องดีเสมอที่นักออกแบบจะคิดให้พวกเรานักพัฒนา ... ;)

— AGuyCalledGerald

นอกจากนี้หากคุณใส่ไว้inputข้างlabelในlabelแท็กจะไม่สืบทอด css เริ่มต้น

— AmerllicA

16

ไอเท็มฟอร์ม (อินพุต / textarea / ฯลฯ ) ไม่สืบทอดข้อมูลฟอนต์ คุณจะต้องตั้งค่าตระกูลแบบอักษรในรายการเหล่านั้น

— จอห์นกรีน
แหล่งที่มา

@jhon wat เคยพูดว่าอาจเป็นจริงมีเอกสารมาตรฐาน / ถูกต้องเกี่ยวกับเรื่องนี้หรือไม่?

— diEcho

องค์ประกอบแบบอักษรยังไม่สืบทอดสีพื้นหลังและอื่น ๆ จริงๆแล้วองค์ประกอบแบบอักษรเป็นสิ่งที่ไม่น่าเชื่อถือที่สุดใน html / css ทั้งหมด! คุณไม่สามารถระบุความกว้างของช่องป้อนข้อมูลได้และรับประกันว่าจะเหมือนกันในทุกเบราว์เซอร์

— Ionuț Staicu

ฉันหมายถึงองค์ประกอบของฟอร์ม ยังง่วงอยู่ :)

— Ionuț Staicu

@diEcho - จริงๆแล้วฉันได้ค้นหาข้อมูลจำเพาะและไม่เห็นว่ามันถูกเรียกออกไปไหน เมื่อมองไปที่ 'เกี่ยวข้อง' และ SO กำลังให้ลิงก์คำถามที่ซ้ำกัน: stackoverflow.com/questions/2874813 (ซึ่งให้คำตอบของฉันแม้ว่าจะไม่มีลิงก์ข้อมูลจำเพาะก็ตาม) สไตล์ชีตเริ่มต้นใน Chrome จะแสดงแบบอักษรเป็น "-webkit-small-control;" ซึ่งหมายความว่ามีการแทนที่เนื้อหาอยู่แล้วดังนั้นจึงมีความเฉพาะเจาะจงมากกว่าสิ่งที่กำหนดไว้ในเนื้อหา เช่นเดียวกันกับองค์ประกอบ TD ถ้าฉันจำไม่ผิด ผมก็เลยไม่รู้จะพูดอะไรนอกจาก "ก็แค่นั้น" :)

— จอห์นกรีน

5

สามปีต่อมาฉันพบว่ามันแปลก<input>องค์ประกอบของประเภทreset, submitและbuttonไม่ได้รับมรดกfont-familyใน Chrome หรือ Safari ฉันพบว่าพวกเขาจะไม่ได้รับช่องว่างภายในเช่นกัน

แต่เมื่อผมยุ่งกับคุณสมบัติบางอย่างเช่นbackground, borderหรือแปลกappearanceคุณสมบัติแล้วfont-familyและpaddingมีผลกระทบ แต่ลักษณะพื้นเมืองและความรู้สึกของปุ่มจะหายไปซึ่งไม่ได้เป็นปัญหาถ้าคุณจะสมบูรณ์ restyling ปุ่ม

หากคุณต้องการปุ่มมองพื้นเมืองกับมรดกที่ได้รับfont-familyใช้องค์ประกอบแทน<button><input>

ดูCodepen

— อ้วน
แหล่งที่มา

1

ฉันมีปัญหาเดียวกัน สิ่งที่ได้ผลสำหรับฉันคือการเพิ่มสไตล์ให้กับองค์ประกอบอินพุตใน html โดยตรง ฉันกำลังเขียนโค้ดใน React fyi

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

— rpd1297
แหล่งที่มา