为什么 < textarea > 和 < textfield > 不从 body 中提取 font-family 和 font-size？

为什么 Textarea和 textfield不从体内提取 font-family和 font-size？

在这里看到实例 http://jsbin.com/ucano4

密码

        <!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>

如果这是一个通常的行为，那么我应该写在 css 像这样。我需要相同的样式在所有

body,textarea,input  {
font-family: Verdana, Geneva, sans-serif;
font-size:16px
}

XHTML 中有多少其他元素不采用 body {....}的字体样式？

110412 次浏览
小开
最佳答案

默认情况下，浏览器使用 OS 控件或浏览器控件呈现大多数表单元素(文本区、文本框、按钮等)。因此，大多数字体属性都取自操作系统当前使用的主题。

如果你想要改变它们的字体/文本样式，你必须将表单元素本身作为目标-通过选择它们应该足够简单，就像你刚才做的那样。

据我所知，只有形式元素受到影响。我的第一反应是: input，button，textarea，select。

小开

所有浏览器都有内置的默认样式表。这就是为什么，当您创建一个完全没有定义任何样式的页面时，<h1>标记是大而粗的，而 <strong>使文本为粗体。类似地，<input>和 <textarea>元素的字体样式在默认样式中定义。

要在 Firefox 中查看这个样式表，请将其放入地址栏: resource://gre/res/forms.css

不管怎样，你必须覆盖这些样式，就像你覆盖上一个例子中的其他样式一样。

如果您想知道还定义了哪些其他样式，请查看参考资料中的 CSS 文件。您可以通过上面的 URL 访问它们，或者查看 Firefox 目录中的 res文件夹(例如: c:\program files\mozilla firefox\res)。这些可能会影响正常页面的样式:

  • Html.css
  • 表格 css
  • 离奇怪异
  • 美国海军陆战队
小开

某些控件没有默认继承字体设置。您可以通过在 CSS 中放置以下内容来重写:

textarea {
font-family: inherit;
font-size: inherit;
}
小开

我认为他的意思是有些元素比 DOM 中的其他元素更具体，或者作用域更小。因为 textarea 存在于 body 内部，所以为 textarea 定义的任何样式都会覆盖 body {}样式。所以 FF 的默认文本样式覆盖了你的身体样式，即使你的身体样式是后来定义的(通常更新的东西会优先考虑，但如果它是在一个更广泛的范围/不那么具体)。

小开

我尝试了各种各样的技巧，以停止在移动文本使用更大的字体比正常的文本。看起来当我的文本区域设置为 Protocol = “45”时，字体是正常的，但是一旦设置为 cos = “71”，即使它保持在 td 标签内，字体也会变大。

在 mozilla 页面(https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust)我发现了这个

textarea {
text-size-adjust: none;
}

对我来说，这似乎是最好的答案。它适用于个人电脑、平板电脑，最重要的是，适用于我的安卓手机。


提交答案