Họ phông chữ không được kế thừa cho các trường nhập biểu mẫu?

Question

Các yếu tố đầu vào của biểu mẫu html chẳng hạn như trường nhập văn bản hoặc hộp chọn tự động kế thừa thuộc tính phông chữ-gia đình khỏi phần thân? Ví dụ:

body { 
font-family:'Lucida Casual', 'Comic Sans MS'; 
} 

Nó sẽ không sử dụng phông chữ trên trong dưới trường mẫu đầu vào:

<form> 
    <div> 
     <label for="name">Name</label> 
     <input id="name" name="name" type="text" /> 

    <div> 
</form> 

hãy có một cái nhìn tại http://jsfiddle.net/3fkNJ/

Có phổ biến mà chúng ta phải làm lại -define họ phông chữ cho các trường nhập liệu, hoặc tôi đang làm gì sai?

Answer 1

Có, bạn cần đặt số font vào thẻ input.

.input{ 
padding:5px; 
font-size:16px; 
font-family:'Lucida Casual', 'Comic Sans MS';  
} 

http://jsfiddle.net/jasongennaro/3fkNJ/1/

Bạn cũng có thể sử dụng inherit để thiết lập font trên form lĩnh vực.

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

http://jsfiddle.net/jasongennaro/3fkNJ/7/

EDIT - giải thích thêm

Hầu hết các trình duyệt hiển văn bản bên form yếu tố như của hệ điều hành của người dùng. Điều này là để giữ, như tôi hiểu nó, một cái nhìn chung và cảm nhận cho người dùng. Tuy nhiên, tất cả có thể được ghi đè bằng mã ở trên.

Answer 2

không có gì sai với mã .. Điều này thường xảy ra khi trường nhập mất cài đặt chủ đề OS theo mặc định .. Điều này đã được thảo luận trong ngăn xếp chồng. Xem liên kết bên dưới để biết thêm chi tiết.

Why <textarea> and <textfield> not taking font-family and font-size from body?

Answer 3

Hãy thử thay đổi thuộc tính cơ CSS của bạn để

body *{font-family:'Lucida Casual', 'Comic Sans MS';} 

Các * lực lượng mỗi phần tử con kế thừa các giá trị quy định trong quy tắc CSS bạn đã viết vì các quy tắc CSS trên đặc điểm kỹ thuật. Hãy xem fiddle here

Điều này rất tiện lợi nếu bạn muốn mọi phần tử trên trang của mình có giá trị gia đình phông chữ giống nhau, không tiện dụng nếu bạn muốn biểu mẫu của mình có giá trị khác nhau.

Smashing Magazine has an article có thể giúp bạn thêm.

Tôi hy vọng điều đó sẽ hữu ích.

Answer 4

nó làm việc cho tôi:

tags-input *, tags-input *:before, tags-input *:after { 
    font-family: "IRANSans" !important; 
} 

tags-input .tags .input { 
    padding-right: 5px; 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
} 

tags-input .tags .tag-item { 
    float: right !important; 
    font: 13px "IRANSans", tahoma !important; 
}