'font-weight' 属性的 CSS 覆盖答案

【问题标题】：CSS overriding for 'font-weight' property'font-weight' 属性的 CSS 覆盖
【发布时间】：2018-06-05 18:49:41
【问题描述】：

我在 CSS 覆盖“font-weight”属性时遇到了一个奇怪的问题。下面给出了显示问题的代码：-

元素'p'的'font-weight'设置为小（颜色设置为紫色）。但字体在 FF/Chrome 上仍呈现为粗体，而颜色覆盖为紫色。

知道为什么会这样吗？

p {
  font-weight: small;
  color: purple;
}

#speciality_test {
  font-weight: bold;
  color: red;
}

.class_speciality_test {
  font-weight: bold;
  color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />

</head>

<body>
  <div id="speciality_test">
    <p>
      Inside identifier... HTML CSS test pages.
    </p>
  </div>
  <div class="class_speciality_test">
    <p>
      Inside class... HTML CSS test pages.
    </p>
  </div>
</body>

</html>

【问题讨论】：

标签： html css fonts

【解决方案1】：

没有font-weight:small;。我想你的意思是font-weight:normal; 或font-size:small;。

另见CSS Fonts Module Level 3: 3.2 Font weight: the font-weight property。

【讨论】：

【解决方案2】：

font-weight 不能是 small。它是bold 或normal。所以你的声明被忽略了。

在此处查看可能的值：http://www.w3schools.com/cssref/pr_font_weight.asp

【讨论】：

【解决方案3】：

small 是有效值吗？根据 W3C，它应该是 normal、bold、bolder、lighter、inherit 或数字之一。

【讨论】：

【解决方案4】：

我不认为小是有效的。

font-weight: normal;

是我在工作中使用的

【讨论】：

【解决方案5】：

据我所知，small 不是 font-weight 的有效值

font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter | normal | inherit } ;

因此，在您的示例中，使用了来自 #speciality_test 的字体粗细。

Sitepoint reference

【讨论】：