CSS 为什么 <textarea> 和 <textfield> 不从正文中获取字体系列和字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2874813/
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
Why <textarea> and <textfield> not taking font-family and font-size from body?
提问by Jitendra Vyas
Why Textareaand textfieldnot taking font-familyand font-sizefrom body?
为什么Textarea与textfield未服用font-family和font-size从身体？
See live example here http://jsbin.com/ucano4
在此处查看现场示例http://jsbin.com/ucano4
Code
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>texearea font</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
</style>
</head>
<body>
<form action="" method="get">
<textarea name="" cols="20" rows="4"></textarea>
<input name="" type="text" />
</form>
<p>some text here</p>
</body>
</html>
If it's a usual behavior then should i write in css like this. i need same style in all
如果这是通常的行为，那么我应该像这样用 css 编写。我需要相同的风格
body,textarea,input {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}
And how many other elements in XHTML which will not take font styling from body {....}?
XHTML 中还有多少其他元素不会采用字体样式body {....}？
采纳答案by BoltClock
By default, browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using.
默认情况下，浏览器使用操作系统控件或浏览器控件呈现大多数表单元素（文本区域、文本框、按钮等）。所以大部分字体属性取自操作系统当前使用的主题。
You'll have to target the form elements themselves if you want to change their font/text styles - should be easy enough by selecting them though, as you've just done.
如果你想改变它们的字体/文本样式，你必须自己定位表单元素 - 但是通过选择它们应该很容易，就像你刚刚所做的那样。
As far as I know, only form elements are affected. Off the top of my head: input, button, textarea, select.
据我所知，只有表单元素受到影响。关闭我的头顶：input，button，textarea，select。
回答by spoulson
Certain controls are not defaulted to inherit font settings. You can override this by place this in your CSS:
某些控件默认不继承字体设置。您可以通过将其放在 CSS 中来覆盖它：
textarea {
font-family: inherit;
font-size: inherit;
}
回答by nickf
All browsers have built-in default stylesheets. That's why, when you make a page without any styles defined at all, <h1>tags are large and bold, and <strong>makes text bold. Similarly, the font styles for <input>and <textarea>elements are defined in the default styles.
所有浏览器都有内置的默认样式表。这就是为什么当您制作一个完全没有定义任何样式的页面时，<h1>标签会变得又大又粗，<strong>并使文本变得粗体。同样，<input>和<textarea>元素的字体样式在默认样式中定义。
To see this stylesheet in Firefox, put this into your address bar: resource://gre/res/forms.css
要在 Firefox 中查看此样式表，请将其放入地址栏中： resource://gre/res/forms.css
Anyway, you have to override these styles as you would any other styles like you did in that last example.
无论如何，您必须像在上一个示例中所做的任何其他样式一样覆盖这些样式。
In case you're wondering what other styles are defined, check out the CSS files in your resources. You can access them via the url above, or by looking in your resfolder in the firefox directory (eg: c:\program files\mozilla firefox\res). These are the ones which may be affecting the styles of normal pages:
如果您想知道定义了哪些其他样式，请查看资源中的 CSS 文件。您可以通过上面的 url 访问它们，也可以res在 firefox 目录中查看您的文件夹（例如：）c:\program files\mozilla firefox\res。这些是可能影响正常页面样式的那些：
- html.css
- forms.css
- quirk.css
- ua.css
- html.css
- 表单.css
- 怪癖.css
- css文件
回答by user1072406
I think what he means is some elements are more specific than others in the DOM, or have a smaller scope. Since a textarea exists inside the body, any style defined for textarea will overwrite body{} styles. So FF's default textarea style overwrites your body style, even though yours is defined later (usually something more recent will take precedence, but not if it's in a broader scope/less specific).
我认为他的意思是有些元素在 DOM 中比其他元素更具体，或者范围更小。由于正文中存在 textarea，为 textarea 定义的任何样式都将覆盖 body{} 样式。因此 FF 的默认 textarea 样式会覆盖您的正文样式，即使您的正文样式是稍后定义的（通常较新的内容将优先，但如果它的范围更广/不太具体，则不会）。
回答by Brian Jones
I tried all sorts of tricks to stop textarea in mobile using a much larger font than the normal text. It seems that when my textarea was cols="45" the font was normal but as soon as it was raised to cols="71", even though it stayed inside the td tags the font grew large.
我尝试了各种技巧来使用比普通文本大得多的字体来阻止移动中的 textarea。似乎当我的 textarea 是 cols="45" 时字体是正常的，但是一旦它被提升到 cols="71"，即使它留在 td 标签内，字体也会变大。
On the mozilla page ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust) I found this
在 mozilla 页面（https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust）我发现了这个
textarea {
text-size-adjust: none;
}
It seems to the best answer for me. It works on PC, tablet and, most importantly, on my android phone.
这对我来说似乎是最好的答案。它适用于 PC、平板电脑，最重要的是，适用于我的安卓手机。
