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

【问题标题】：Why <textarea> and <textfield> not taking font-family and font-size from body?为什么 <textarea> 和 <textfield> 不从正文中获取字体系列和字体大小？
【发布时间】：2011-02-21 22:05:54
【问题描述】：

为什么 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 {....} 的字体样式？

【问题讨论】：

标签： css xhtml

【解决方案1】：

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

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

据我所知，只有表单元素受到影响。在我脑海中浮现：input、button、textarea、select。

【讨论】：

如果这种行为不受欢迎，最直接的补救措施是添加到您的样式中，textarea, input, button, select { font-family: inherit; font-size: inherit; }。
@Devvyn，您应该添加text-align: inherit，因为按钮的文本通常在中心对齐。
我该如何做相反的事情，也就是在我的整个网页/正文中使用该操作系统字体？
@agirault 你可以这样做：body { font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell" 、“Fira Sans”、“Droid Sans”、“Helvetica Neue”、“Helvetica”、“Arial”、无衬线字体； }

【解决方案2】：

所有浏览器都有内置的默认样式表。这就是为什么，当你创建一个根本没有定义任何样式的页面时，<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

【讨论】：

但
采用 <body> 的字体样式，但 <textarea> 不是
h1 的样式没有定义字体，因此您的body 样式优先。 input 的样式确实定义了一种样式，并且它比您的选择器更具体，所以它获胜。
+1 为您的评论。我不知道。您的意思是某些元素在浏览器中默认具有特定样式，并且不能被 body {....} 覆盖

【解决方案3】：

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

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

【讨论】：

IE 8 之前的版本不支持继承，所以这行不通。
我认为这只是定义每个元素的跨浏览器解决方案body, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }
我同意，这种方法更实用。我只是想通过使用inherit 方法来演示您所看到的行为。
不幸的是 chrome（版本 59.0.3071.115）没有应用 font-size:inherit;没有指定字体系列。
font-weight: inherit; 丢失。

【解决方案4】：

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

【讨论】：

【解决方案5】：

我尝试了各种技巧来使用比普通文本大得多的字体来阻止移动设备中的 textarea。似乎当我的 textarea 为 cols="45" 时字体是正常的，但是一旦将其提升到 cols="71"，即使它留在 td 标签内，字体也会变大。

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

textarea {
   text-size-adjust: none;
}

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

【讨论】：

采用 &lt;body&gt; 的字体样式，但 &lt;textarea&gt; 不是

采用 `<body>` 的字体样式，但 `<textarea>` 不是