Font-family不会继承到表单输入字段？

Question

输入文本字段或选择框等html表单输入元素是否会自动从正文继承font-family属性？ 例如：

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

它不会在下面的表单输入字段中使用上面的字体：

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

   <div>
</form>

请查看http://jsfiddle.net/3fkNJ/

我们是否必须为输入字段重新定义字体系列，或者我做错了什么？

Answer 1

是的，您需要将font放在input标记中。

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

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

您还可以使用inherit在font字段上设置form。

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

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

编辑 - 添加了解释

大多数浏览器将form元素内的文本呈现为用户操作系统的文本。据我所知，这是为了保持用户的共同外观。但是，它都可以被上面的代码覆盖。

Answer 2

代码没有任何问题。这很常见，因为输入字段默认采用OS主题设置。这已在stackoverflow中讨论过。请查看以下链接以获取更多详细信息。

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

Answer 3

尝试将CS​​S body属性更改为

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

*强制每个子元素继承您编写的CSS规则中的指定值，因为CSS规则超出了规范。请参阅fiddle here

如果您希望页面上的每个元素都具有相同的font-family值，那么这很方便，如果您希望表单具有不同的值，则不太方便。

Smashing Magazine has an article可能对您有所帮助。

我希望它有所帮助。

Answer 4

它对我有用：

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