Question

font-weight属性支持的数值范围为100到900（含），关键字值为normal，对应400，bold对应700。

还有bolder和lighter值，它们使元素的字体重量分别比当前重量更大或更轻。

有没有办法说＆＃34;使用当前的体重＆＃34;？也就是说，我不想让这个元素的字体重量比周围文本更轻或更大 - 我希望它是相同的。像这样，但假装span元素实际上是strong元素（因为语义）：

＆＃13;

span {
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

＆＃13;

<header>
  <h1>Header</h1>
  <p>This is a <span>header</span>.</p>
</header>
<footer>
  <p>This is a <span>footer</span>.</p>
</footer>

＆＃13;

我的目标是使用strong元素但没有默认的font-weight样式。

显然font-weight: normal不起作用，因为如上所述normal具体对应于400的数字权重。我尝试了font-weight: initial，但这似乎与font-weight: normal。

Answer 1

font-weight没有针对＆＃34;当前体重＆＃34;的特殊关键字值。相反，您使用CSS范围的inherit关键字来继承来自父元素的权重（包含所谓的＆＃34;周围文本的元素＆＃34;以及有问题的元素）：

＆＃13;

strong {
  font-weight: inherit;
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

＆＃13;

<header>
  <h1>Header</h1>
  <p>This is a <strong>header</strong>.</p>
</header>
<footer>
  <p>This is a <strong>footer</strong>.</p>
</footer>

＆＃13;

对于那些一般不熟悉inherit关键字或CSS继承的人来说，这可能并不明显。但它起作用的原因是因为font-weight与所有其他字体属性一样，是由自然继承的，实际上bolder和lighter关键字值基于继承的值。来自spec：

<强>更大胆的
  指定比继承值更粗的权重。

<强>打火机
  指定比继承值更轻的权重。

因此，通过使用inherit关键字，可以指定未更改的继承值。

（也是CSS范围内的）initial关键字与normal具有相同的效果，因为font-weight属性的初始值，由spec，实际上是normal。但是，因为font-weight是一个继承的属性，所以该属性默认为（对于没有级联值的时候）继承而不是normal的初始值 - 设置initial显式导致{阻止继承的initial {3}}，从而导致cascaded value为400。

Answer 2

我们也可以考虑值unset的行为，就像inherit，如果有一个从父元素继承的值，并且在没有值继承的情况下将降为initial。

如果属性的级联值为unset关键字，则如果它是继承的属性，则将其视为inherit，否则，将其视为{{1 }}。此关键字有效地擦除了级联中较早出现的所有声明值，这些值正确继承或不适用于属性^ref

initial

strong {
  font-weight: unset;
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

需要注意的是，IE（https://caniuse.com/#feat=css-unset-value）不支持该值。（虽然并不奇怪）

有没有办法说＆＃34;使用当前的字体重量＆＃34;没有让它更轻/更大胆？

2 个答案: