<input> 不从 <body> 继承字体答案

【问题标题】：<input> doesn't inherit the font from <body><input> 不从 <body> 继承字体
【发布时间】：2026-01-27 19:40:01
【问题描述】：

我有输入和标签字段：

<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 规则？

【问题讨论】：

很遗憾他们没有。我猜 W3C 已经决定让它们成为系统的默认样式而不是强制它们自己的浏览器样式会更好

标签： css

【解决方案1】：

默认不继承，但可以设置为用css继承

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

演示：http://jsfiddle.net/gaby/pEedc/1/

【讨论】：

字体属性如果没有被提及自动继承，见这里：developer.mozilla.org/en/CSS/font
@diEcho，除了表单元素之外的所有元素都是如此，它们继承自当前系统样式，因此它们保持用户熟悉的感觉（默认情况下），但它们可以手动覆盖。
错误与否，Firebug 显示给我的内容非常令人困惑：字体大小为 12，但计算后仍为 13.3333。在将字体大小设置为继承类似于 Gaby 的答案后，我的问题得到了解决：O
@Gaby 设计师总是为我们的开发人员考虑所有想法总是那么好...... ;)
另外，如果你把input放在label里面，label标签不会继承默认的css

【解决方案2】：

表单项（inputs/textarea/etc）不继承字体信息。您需要在这些项目上设置字体系列。

【讨论】：

@jhon 你说的可能是真的，有没有关于这个的标准/有效文件？？
字体元素也不继承颜色、背景等。其实，字体元素是整个html/css中最不靠谱的东西！您不能为输入框指定宽度，并且保证在所有浏览器中都是相同的！
我的意思是表单元素。还在困:)
@diEcho - 老实说，我搜索了规格，并没有看到它在任何地方被调用。查看“相关”，SO 给了我一个重复的问题链接：*.com/questions/2874813（它给出了我的答案，虽然也没有规范链接）。 Chrome 中的默认样式表将字体列为“-webkit-small-control;”，这意味着它已经覆盖了正文，因此比正文上设置的任何内容都更具体。如果我没记错的话，TD 元素也是如此。所以除了“就是这样”，我不知道该说什么。 :)

【解决方案3】：

三年后，我发现 <input> 类型的元素 reset、submit 和 button 在 Chrome 或 Safari 中不继承 font-family 很奇怪。我发现他们也不会收到填充。

但是当我弄乱某些属性时，比如background、border，或者这个奇怪的appearance 属性，那么font-family 和padding 有效果，但是按钮的原生外观和感觉会丢失，如果您完全重新设置按钮的样式，这不是问题。

如果您想要一个具有原生外观的按钮，并继承 font-family，请使用 <button> 元素而不是 <input>。

见Codepen。

【讨论】：

【解决方案4】：

我也遇到了同样的问题。对我有用的是将样式直接添加到 html 中的输入元素。我正在使用 React 进行编码，仅供参考。

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

【讨论】：

【解决方案5】：

这个问题已经有 10 年历史了，最近有些人可能会发现在 HTML 页面顶部添加正确的 <meta> 信息可以解决在移动设备上遇到的类似问题 - 尝试：

<meta name="viewport" content="width=device-width, initial-scale=1">

MDN 对 viewport meta information 的作用有很好的指导

【讨论】：