html - Font-family 是不是继承给了表单输入域？

Question

输入文本框或选择框等html表单输入元素不是自动继承了body的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 来设置form 字段上的font。

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

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

编辑 - 添加了解释

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