文本区域中的字体一致性

Posted 2023-05-07

技术标签:

【中文标题】文本区域中的字体一致性【英文标题】：Font consistency in a textarea 【发布时间】：2010-10-25 17:45:07 【问题描述】：

如何使文本区域与网页上的其他所有字体具有相同的字体？

目前我有我的代码：

test.html:

    <html>
      <head>
        <link rel="stylesheet" href="test.css">
      </head>
    <body>
        <div id="testarea">
          <textarea></textarea>
        </div>
    </body>
    </html>

test.css:

    body  font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
    #testarea textarea  width: 30em;height: 7em;font: inherit;

字体在 Mozilla 中继承，但 IE7 将 Courier 保留在文本区域内。

UPD：显然inherit 在 IE 中对 textarea 不起作用，所以我将采用 AlbertoPL 的方法。

【问题讨论】：

奇怪的是 Mozilla “工作”，因为我来搜索这个错误时它没有 (FF 4)。我的body 有字体声明，但textarea 在快递中。将我的字体声明指定为 body, textarea ... 效果很好。 ...更好的是，我实际上阅读了这个问题并设置了textarea font:inherit，这也很有效；）。 【参考方案1】：

只需创建一个 textarea 元素并在那里定义您的字体元素。

textarea  font: 100%/120% Verdana, Arial, Helvetica, sans-serif;

你可以把它移出body元素。

如果您不想使用*，则必须定义字体两次（一次在正文中，一次在文本区域中）。

【讨论】：

这行得通，但是通过 * 将样式应用于所有内容显然需要相当多的开销两次定义字体也肯定会起作用，但为什么字体：继承不起作用？就像我说的，我无法测试 atm，但我 99% 确定那不是我所做的...... 我猜IE7根本没有正确继承，这是一种耻辱。 Eric Meyer 在意识到 IE 不正确支持它之后，从他著名的 CSS 重置中删除了“继承”值meyerweb.com/eric/thoughts/2008/01/15/resetting-again

以上是关于文本区域中的字体一致性的主要内容，如果未能解决你的问题，请参考以下文章