字体系列不继承到表单输入字段？答案

【问题标题】：Font-family is not inherited to the form input fields?字体系列不继承到表单输入字段？
【发布时间】：2011-09-25 03:05:22
【问题描述】：

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/

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

【问题讨论】：

标签： html css forms fonts input

【解决方案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 元素内的文本呈现为用户操作系统的文本。据我了解，这是为了保持用户的共同外观和感觉。但是，上面的代码可以全部覆盖。

【讨论】：

这在 jquery-autocomplete 的情况下不起作用。你知道为什么吗？
@ManasPaldhe 这可能是因为自动完成有一个更具体的 css 选择器。我检查了jqueryui.com/autocomplete，它显示input 有一个id 的“标签”。在id 中设置字体，你应该会很好。

【解决方案2】：

代码没有问题。这很常见，因为输入字段默认采用 OS 主题设置。这已经在 stackoverflow 中讨论过。查看以下链接了解更多详情。

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

【讨论】：

【解决方案3】：

尝试将您的 CSS body 属性更改为

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

* 强制每个子元素继承您编写的 CSS 规则中的指定值，因为 CSS 规则高于规范。见fiddle here

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

Smashing Magazine has an article 可能会进一步帮助您。

我希望它有所帮助。

【讨论】：

这行得通，但这是草率的做法。性能受到* 选择器的影响，* 将以您可能未隐含期望的方式优先。
这并不是“草率的做法”，它只是意味着在使用时，人们需要了解他们在做什么，因此 Smashing Magazine 参考。就性能而言，是的，它使用了更大的浏览器开销，但是否合适取决于目标，是否每个元素都应具有相同的字体，还是只有几个元素？如果只是几个元素，那么在选择器中指定会更好。对我来说，sunjie 很清楚，他希望所有元素都具有相同的字体，因此我的解决方案适合强制执行这一点，但是是的，它会在其他地方产生影响。
我想你误会了，我所说的正是“草率的做法”。虽然最好避免使用无关的 * 选择器，但仅使用一个选择器并不一定是“草率的做法”。另一方面，使用你的 CSS 来避免继承特性是“草率的做法”。作者没有在任何地方声明他希望普遍在具有指定字体系列的选择器之前。
作者没有明确说他希望所有东西都被继承，这暗示了问题的第一行，因为暗示这是一个合适的解决方案。已提供参考，因此根据他的需要，他可以选择。感谢您的评论
感谢您的回答。我认为您的解决方案不会损害性能。很多文章都推荐使用*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }，所以无论如何我们都有一些通用选择器。

【解决方案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;
}

【讨论】：