Question

我有输入和标签字段：

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

Answer 1

默认情况下不会继承，但您可以将其设置为使用css继承

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

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

Answer 2

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

Answer 3

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

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

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

请参阅Codepen。

Answer 4

我遇到了同样的问题。对我有用的是将样式直接添加到html中的input元素。我在React fyi中编码。

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

<input />不继承字体

4 个答案: