CSS <input> 不从 <body> 继承字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6080413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<input> doesn't inherit the font from <body>
提问by Judy R
I have input and label fields:
我有输入和标签字段：
<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />
and CSS:
和 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; }
When the code opens up in Firefox the fonts are not the same. Firebug shows that both "should" inherit and when I look at computed it shows the label uses Verdana. However the input shows it uses "MS Shell Dlg".
当代码在 Firefox 中打开时，字体不一样。Firebug 显示“应该”继承，当我查看计算时，它显示标签使用 Verdana。但是输入显示它使用“MS Shell Dlg”。
Can anyone explain what's happening and why it doesn't seem to obey the normal CSS rules?
谁能解释发生了什么以及为什么它似乎不遵守正常的 CSS 规则？
回答by Gabriele Petrioli
It does not inherit by default but you can set it to inherit with css
默认情况下它不继承，但您可以将其设置为使用 css 继承
input, select, textarea, button{font-family:inherit;}
回答by John Green
Form items (inputs/textarea/etc) don't inherit font information. You'll need to set the font-family on those items.
表单项（输入/文本区域/等）不继承字体信息。您需要在这些项目上设置字体系列。
回答by Stoutie
Three years later, I'm finding it strange <input>elements of types reset, submit, and buttondon't inherit font-familyin Chrome or Safari. I discovered they would not receive padding either.
三年后，我发现它<input>的类型很奇怪，reset, submit, 并且button不在font-familyChrome 或 Safari 中继承。我发现他们也不会收到填充。
But when I mess with certain properties, like background, border, or this strange appearanceproperty, then font-familyand paddinghave effect, but the native look and feel of the button is lost, which is not a problem if you are completely restyling the buttons.
但是当我弄乱某些属性时，例如background,border或这个奇怪的appearance属性，然后font-family和padding有效果，但是按钮的本机外观和感觉丢失了，如果您完全重新设计按钮，这不是问题。
If you want a native looking button, with inherited font-family, use the <button>element instead of <input>.
如果您想要带有继承的原生外观按钮font-family，请使用<button>元素而不是<input>。
See Codepen.
见代码笔。
回答by rpd1297
I've had the same problem. What worked for me was adding the style directly to the input element in the html. I'm coding in React fyi.
我遇到了同样的问题。对我有用的是将样式直接添加到 html 中的输入元素。我在 React 中编码，仅供参考。
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />
