Question

为什么Textarea和textfield没有从正文中抓取font-family和font-size？

代码

        <!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 {....}中获取字体样式？

Answer 1

某些控件未默认继承字体设置。您可以通过将其放在CSS中来覆盖它：

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

Answer 2

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

如果你想改变它们的字体/文本样式，你必须自己定位表单元素 - 通过选择它们应该很容易，就像你刚刚那样。

据我所知，只有表单元素受到影响。在我的头顶：input，button，textarea，select。

Answer 3

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

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

无论如何，你必须像在上一个例子中那样覆盖这些样式。

如果您想知道其他样式的定义，请查看资源中的CSS文件。您可以通过上面的URL访问它们，或者查看firefox目录中的res文件夹（例如：c:\program files\mozilla firefox\res）。这些可能会影响普通页面的样式：

html.css
forms.css
quirk.css
ua.css

Answer 4

我认为他的意思是某些元素比DOM中的其他元素更具体，或者范围更小。由于textarea存在于body中，因此为textarea定义的任何样式都将覆盖body {}样式。因此，FF的默认textarea样式会覆盖您的身体样式，即使您的身体风格稍后定义（通常更新的内容将优先，但如果它在更广泛的范围内/更不具体，则不会。）

Answer 5

我尝试了各种技巧来使用比普通文本大得多的字体来阻止移动设备中的文本区域。看来，当我的textarea是cols =“ 45”时，字体是正常的，但是一旦它升至cols =“ 71”，即使它停留在td标签内，字体也会变大。

在mozilla页面（https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust上）我找到了

textarea {
   text-size-adjust: none;
}

这对我来说似乎是最好的答案。它可以在PC，平板电脑上运行，最重要的是，可以在我的Android手机上运行。

为什么<textarea>和＆lt; textfield＆gt;不从body中获取font-family和font-size？</textarea>

5 个答案: