较轻的字体在文本区域中不起作用

Question

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

如何使字体粗细小于600才能正确显示textarea字体？

小提琴：http://jsfiddle.net/bk53K/

代码：

<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;
}

Answer 1

并非所有字体在所有粗细中都可用。正如MDN所说的：

字体粗细CSS属性指定字体的粗细或粗体。但是，有些字体并非在所有粗体中都可用；有些字体仅在普通和粗体中可用。不仅提供普通和粗体的字体的数字字体粗细。如果给定的确切权重不可用，则600-900使用最接近的可用较暗权重(如果没有，则使用最接近的可用较轻权重)，100-500使用最接近的可用较轻权重(或者，如果没有，则使用最接近的可用较暗权重)。这意味着对于只提供普通和粗体的字体，100-500是正常的，600-900是粗体。

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

Answer 2

通过声明字样具有这样的粗细的字体，您可以获得小于600的字体粗细(或者就这一点而言小于700 )。人们通常在网页上使用的大多数字体都没有这样的字体。在您的例子中，没有声明字体，所以浏览器将使用textarea的默认字体，通常是monospace映射到的通用名称。几乎可以肯定的是，它没有任何重量小于正常重量(700)。

获得较轻字体粗细的实用方法是使用合适的Google字体。大多数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>

Answer 3

这里有一篇关于字体平滑的很好的文章，它可能会做到这一点。我发现使用-webkit-font-平滑化:抗锯齿；使我的字体更接近它们的桌面粗细。