较浅的字体在textarea中不起作用答案

【问题标题】：lighter font not working in textarea较浅的字体在textarea中不起作用
【发布时间】：2014-03-20 18:10:04
【问题描述】：

我一直在环顾四周，似乎找不到明确的答案。

如何让textarea 字体的字体粗细小于 600 以正确显示？

代码：

<textarea rows="7" class="randomText">Never gonna give you up Never gonna let you down Never gonna run around and desert you Never gonna make you cry Never gonna say goodbye Never gonna tell a lie and hurt you

textarea {
    border: none;
    resize: none;
    font-size: 30px;
    font-weight: 100;
}

【问题讨论】：

它似乎对我有用...i.imgur.com/HUeKrme.png。您使用的是什么浏览器/操作系统？
我在 os x 上，使用 chrome。我在windows机器上用3个主流浏览器测试过，结果都一样。

标签： html css fonts textarea

【解决方案1】：

并非所有字体都适用于所有粗细。正如MDN 所说：

font-weight CSS 属性指定字体的粗细或粗细字体。但是，某些字体并非适用于所有粗细；有些是仅适用于普通和粗体。提供不仅仅是普通和粗体的字体的数字字体粗细。如果给出的确切重量不可用，则 600-900 使用最接近的可用深色重量（或者，如果没有，则使用最接近的可用较轻重量），而 100-500 使用最接近的可用较轻重量（或者，如果没有，最接近的可用深色权重）。这意味着对于只提供普通和粗体的字体，100-500 是普通字体，600-900 是粗体。

行为也会因浏览器、字体和客户端操作系统而异。

【讨论】：

实际上，人们在网页上使用的大多数字体，或者浏览器默认使用的字体，只有正常粗体，或者只有正常。
感谢文章链接

【解决方案2】：

通过声明具有这种粗细字体的字体，您可以得到小于 600（或轻于 700）的字体粗细。人们通常在网页上使用的大多数字体都没有这种字体。在您的情况下，没有声明字体，因此浏览器将使用 textarea 的默认字体，通常是通用名称 monospace 映射到的任何字体。几乎可以肯定，它的重量没有比正常 (700) 小。

获得较轻字体粗细的实用方法是使用合适的 Google 字体。大多数谷歌字体只有普通和粗体，但有些也有其他权重。不过，重量 100 非常罕见。

如果您希望为textarea 使用浅色等宽字体，您可以考虑Source Code Pro，这是一种简单的无衬线等宽字体，粗细分别为 200、300、400、500、600、700 和 900。示例：

<link rel='stylesheet' href=
  'http://fonts.googleapis.com/css?family=Source+Code+Pro:300'>
<style>
textarea {
  font-family: Source Code Pro;
  font-weight: 300;
}
</style>
<textarea>Hello world</textarea>

【讨论】：

好的，谢谢。不幸的是我不能使用谷歌字体。但我现在有一些东西要上桌。谢谢

【解决方案3】：

这是一篇关于字体平滑的精彩文章，它可能会起到作用。我发现使用 -webkit-font-smoothing: antialiased;使我的字体比没有字体更接近它们的桌面重量。

【讨论】：

字体平滑与字体粗细无关。