如何降低文字的粗体度？

Question

#first {
  text-align: center;
  font-size: 40px;
  font-weight: 200;
}
#second {
  text-align: center;
  font-size: 25px;
  font-weight: 50;
}
#third {
  text-align: center;
}

<p id="first">One account.All of google</p>
<p id="second">Sign in to continue to Gmail</p>
<div id="login">
  <form>
    <img src="img.jpg">
    <input type="text" name="username" value="Enter your username">
    <br>
    <input type="password" name="password" value="password">
    <br>
    <input type="submit" value="Sign in">
    <br>
    <a href="">Forgot password?</a>
  </form>
</div>
<p id="third">Sign in with different account</p>

我无法减少font-weight。我希望#secondid 的权重小于#firstid 的权重。我已经使用了，font-weight但仍然不起作用。

Answer 1

字体粗细不是动态的。您不能随意决定使用某个值并期望字体粗细发生变化。从来都不font-weight: 50;是一个正确的属性。没有字体包含“50”粗细。

浏览器或 CSS 不会创建 字体粗细，或对字体应用伪粗细（假粗细），唯一需要注意的是指定bold- 浏览器在某些情况下可能会创建假“粗体”。使用的字体文件必须具有权重才能font-weight使属性生效。浏览器可能会猜测并使用下一个最接近的权重。有时浏览器可能会充分猜测，有时则不会，或者即使进行了猜测，字体文件中也没有任何内容可供使用。

字体粗细有两种基本形式——

通用术语：

• font-weight: normal;- 使用字体的标准粗细
• font-weight: bold;-如果字体包含此粗细，则使用大于“正常”的字体粗细
• font-weight: bolder;-如果字体包含此粗细，则使用比“正常”大 2 倍的字体粗细。回退是使用立即大于“正常”或“粗体”的权重。
• font-weight: lighter;-如果字体包含此粗细，则使用小于“正常”的字体粗细。后备是使用“正常”权重。
• font-weight: inherit;-- 继承父元素的权重
• font-weight: initial;-- 使用默认的字体粗细

选项二，特定重量名称。请注意，字体文件必须配置为在内部包含这些名称。您不能简单地选择一个号码并使用它。

• font-weight: 100; 如果字体包含这个粗细
• font-weight: 200; 如果字体包含这个粗细
• font-weight: 300; 如果字体包含这个粗细
• font-weight: 400; 如果字体包含这个粗细
• ETC。

设置font-weight: 100;为不包含100粗细指定的字体仅意味着浏览器将使用可用的下一个最接近的粗细。因此，如果您的字体文件仅包含 400、600 和 900 的粗细 - 如果您将粗细设置为 100 和 200，则在这两种情况下都将使用 400 粗细，因为 400 是最接近 100 和 200 的值。权重为 700 可能意味着浏览器使用 600 权重或900 权重。在大多数情况下，会选择较小的值，因此很可能会使用 600 权重。

如果要对字体系列使用特定的粗细，首先需要确保字体文件本身包含该粗细。根据您发布的标记，您需要使用实际包含200 和 100 粗细指定的字体。