Html Font-family 不是继承到表单输入字段吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6520689/
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
Font-family is not inherited to the form input fields?
提问by sunjie
Don't the html form input elements such as input text field or select box automatically inherit the font-family property from the body? For example:
html表单的输入元素，比如输入文本框或者选择框，是不是自动继承了body的font-family属性？例如：
body {
font-family:'Lucida Casual', 'Comic Sans MS';
}
It will not use the above font in the below form input field:
它不会在以下表单输入字段中使用上述字体：
<form>
<div>
<label for="name">Name</label>
<input id="name" name="name" type="text" />
<div>
</form>
Please have a look at http://jsfiddle.net/3fkNJ/
请看一下http://jsfiddle.net/3fkNJ/
Is it common that we have to re-define the font family for the input fields, or am i doing something wrong?
我们必须重新定义输入字段的字体系列是很常见的，还是我做错了什么？
回答by Jason Gennaro
Yes, you need to place the fontin the inputtag.
是的，你需要把font在input标签。
input{
padding:5px;
font-size:16px;
font-family:'Lucida Casual', 'Comic Sans MS';
}
http://jsfiddle.net/jasongennaro/3fkNJ/1/
http://jsfiddle.net/jasongennaro/3fkNJ/1/
You can also use inheritto set the fonton formfields.
您还可以使用inherit来设置fontonform字段。
input, textarea, select { font-family:inherit; }
http://jsfiddle.net/jasongennaro/3fkNJ/7/
http://jsfiddle.net/jasonennaro/3fkNJ/7/
EDIT- explanation added
编辑- 添加了解释
Most browsers render text inside formelements as that of the user's operating system. This is to keep, as I understand it, a common look and feel for the user. However, it can all be overwritten by the code above.
大多数浏览器将form元素内的文本呈现为用户操作系统的文本。据我所知，这是为了保持用户的共同外观和感觉。但是，它都可以被上面的代码覆盖。
回答by z0mBi3
there is nothing wrong with the code.. This is common as the input field takes the OS theme settings by default.. This has already been discussed in stackoverflow. Look into the below link for more details.
代码没有任何问题。这很常见，因为输入字段默认采用操作系统主题设置。这已经在 stackoverflow 中讨论过。查看以下链接了解更多详情。
Why <textarea> and <textfield> not taking font-family and font-size from body?
回答by Ryan
Try changing your CSS body attribute to
尝试将您的 CSS body 属性更改为
body *{font-family:'Lucida Casual', 'Comic Sans MS';}
The * forces every child element to inherit the specified value within the CSS rule you have written because of the CSS rules over specification. See the fiddle here
* 强制每个子元素继承您编写的 CSS 规则中的指定值，因为 CSS 规则高于规范。请参阅此处的小提琴
This is handy if you want every element on your page to have the same font-family value, not so handy if you do want your forms to have different value.
如果您希望页面上的每个元素都具有相同的 font-family 值，这很方便，如果您确实希望表单具有不同的值，则不太方便。
Smashing Magazine has an articlethat may help you further.
Smashing Magazine 有一篇文章可以帮助你进一步。
I hope it helps.
我希望它有帮助。
回答by iman
it worked for me:
它对我有用：
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;
}
