更改文本区域的字体

Posted 2023-05-07

【中文标题】更改文本区域的字体

【英文标题】：Changing The Font Of Text Area

【发布时间】：2012-06-21 03:20:11

【问题描述】：

我认为这是一个简单而愚蠢的问题。我在我的 html 脚本中包含了一个文本区域。

是否可以更改文本区域的默认字体？

默认的不好看。我希望有办法改变它。

【参考方案1】：

是的，使用 CSS font-family property，就像任何其他元素一样。

W3C 有一个 CSS tutorial 和 Mozilla

【讨论】：

无论出于何种原因，在 Chrome 中使用 CSS 类应用字体系列时，这对我不起作用。我可以让它工作的唯一方法是将textarea的CSS专门设置为font-family：inherit;字体大小：继承；然后应用设置了 font-family 的类。

【参考方案2】：

您可以打开您的 css 文件并编写如下所述的代码

textarea  
  
   font-family:"Times New Roman", Times, serif;  
   font-size: 12px;   

按照上述步骤，您可以更改任何您想要的 HTML 标记的默认属性。

【参考方案3】：

还有捷径懒人版（不推荐）：

    <textarea rows="5" cols="50" 
     style="font-family:Times New Roman;color:#003399;white-space:pre-wrap">Put your text here</textarea>

【讨论】：

为什么不推荐这样做？

您应该将级联样式表与类或 ID 选择器一起使用，而不是内联样式属性或字体标签，这可能已被弃用。

@MateusRibeiro 你 可能讨厌 CSS，但如果你试图做一些事情，比如实现 CSP 来创建安全网站，那么你最终会给自己制造不必要的问题，如果你使用内联样式。此外，内联样式使可重用性和可维护性变得更加困难。

【参考方案4】：

也可以使用字体简写版

textarea

    font: 12px "Times New Roman", Times, serif;

价值观：

font: font-style font-variant font-weight font-size/line-height font-family;