为什么<textarea>和<textfield>不能从正文中获取字体系列和字体大小？

118

为什么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 {....}？

css xhtml

— Jitendra Vyas
source

76

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

如果要更改字体/文本样式，则必须将表单元素本身作为目标-通过选择它们应该很容易，就像刚才所做的那样。

据我所知，仅表单元素会受到影响。关闭我的头顶：input，button，textarea，select。

— BoltClock
source

31

如果不希望出现这种情况，最直接的补救方法是在您的样式中添加textarea, input, button, select { font-family: inherit; font-size: inherit; }。

— Devvyn '16

@Devvyn，您应该添加text-align: inherit按钮，因为按钮的文本通常在中心对齐。

— 约书亚·穆海姆

相反，我该如何在整个网页/正文中使用该OS字体？

— agirault

@agirault，您可以执行以下操作：body { Sans”，“ Helvetica Neue”，“ Helvetica”，“ Arial”，无衬线；}

— getup8

149

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

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

— Spoulson
source

4

IE 8之前的版本不支持继承，因此将无法使用。

— DisgruntledGoat 2010年

6

我认为这只是定义每个元素的跨浏览器解决方案body, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— Jitendra Vyas

1

我同意，这种方法更实用。我只是想通过使用该inherit方法来演示您所看到的行为。

— spoulson 2010年

不幸的是，chrome（版本59.0.3071.115）未应用font-size：inherit; 不指定字体系列。

— Ondrej

font-weight: inherit;不见了。

— ceving

10

所有浏览器都有内置的默认样式表。这就是为什么当您制作一个根本没有定义任何样式的页面时，<h1>标记既大又粗体，<strong>并使文本变为粗体。同样，字体样式<input>和<textarea>元素在默认的样式定义。

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

无论如何，您必须像在上一个示例中所做的那样覆盖所有这些样式。

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

html.css
表格
quirk.css
ua.css

— 尼克
source

但是<h1>正在采用字体样式，<body>但<textarea>不是这样

— Jitendra Vyas 2010年

3

的样式h1未定义字体，因此您的body样式优先。的样式input确实定义了一种样式，它比选择器更具体，因此会胜出。

— 尼克

为您的评论+1。我不知道您的意思是某些元素在浏览器中默认具有特定的样式，并且不能被正文{....}覆盖

— Jitendra Vyas 2010年

1

我认为他的意思是某些元素比DOM中的其他元素更具体，或者范围更小。由于正文中存在textarea，因此为textarea定义的任何样式都将覆盖body {}样式。因此，FF的默认textarea样式会覆盖您的身体样式，即使您的身体样式是在以后定义的（通常，较新的样式也将优先，但如果是在较宽的范围/不太明确的情况下则不会）。

— 用户名
source

0

我尝试了各种技巧，以使用比普通文本大得多的字体来阻止移动设备中的文本区域。看来，当我的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手机上运行。

— 布赖恩·琼斯
source