Question

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

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

代码：

<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所述：

font-weight 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-smoothing：antialiased;使我的字体更接近他们的桌面重量而不是没有。

较轻的字体在textarea中不起作用

3 个答案: