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减少。我希望#second id的权重小于#first id的权重。我已经使用了font-weight，但它仍无效。

Answer 1

字体粗细不是动态的东西。你不能随意决定使用一个值，并期望改变font-weight。 font-weight: 50; 从不是正确的属性。没有字体包含“50”重量。

浏览器或CSS执行不创建字体粗细，或对字体应用伪权重（虚假权重），唯一的警告是{{1}指定 - 在某些情况下，浏览器可能会创建一个虚假的“粗体”。正在使用的字体文件必须拥有bold属性生效的权重。浏览器可以猜测并使用下一个最接近的权重。有时浏览器可能会充分猜测，有时它们不会或者即使猜测也没有字体文件中的任何内容可供使用。

font-weight有两种基本形式 -

通用术语：

font-weight - 使用字体的标准重量
font-weight: normal; - 如果字体包含此权重，则使用大于“正常”的字体权重
font-weight: bold; - 如果字体包含此权重，则使用大于“正常”字体的权重2x 。后退是使用的重量立即大于“正常”或“粗体”。

font-weight: bolder; - 如果字体包含此权重，则使用小于“正常”的字体粗细。后备是使用“正常”的重量。

font-weight: lighter; - 继承父元素的权重

font-weight: inherit; - 使用字体的默认权重

选项二，具体的重量指定。请注意，字体文件必须配置为在内部包含这些指定。你不能简单地选择一个数字并使用它。

font-weight: initial; 如果字体包含此权重

font-weight: 100; 如果字体包含此权重

font-weight: 200; 如果字体包含此权重

font-weight: 300; 如果字体包含此权重

等

将font-weight: 400;设置为不包含font-weight: 100;权重指定的字体只是意味着浏览器将使用可用的下一个最接近的权重。因此，如果您的字体文件仅包含400,600和900的权重 - 如果您将权重设置为100和200，那么将在两个实例中使用400权重，因为400是最接近的值为100和200.将权重设置为700可能意味着浏览器使用600权重或 900权重。在大多数情况下，选择较小的值，因此最有可能使用600重量。

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

如何减少文字的粗体？

1 个答案: