有没有办法说"使用当前的字体重量",而不是让它更轻/更大胆？

Question

该font-weight属性支持从100到900(包括100和900)的数值,以及关键字值,例如normal对应于400并bold对应于700.

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

有没有办法说"使用当前的重量"？也就是说,我不想让这个元素的字体重量比周围文本更轻或更大 - 我希望它是相同的.像这样,但假装span元素实际上是一个strong元素(因为语义):

span {
  text-transform: uppercase;
}

header {
  font-weight: bold;
}

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

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

显然font-weight: normal不起作用,因为如上所述normal具体对应于400的数字权重.我试过font-weight: initial,但这似乎具有相同的效果font-weight: normal.

Answer 1

font-weight"当前体重"没有特殊的关键字值.相反,您使用CSS范围的inherit关键字从父元素(包含所谓的"周围文本"的元素以及相关元素)继承权重:

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

header {
  font-weight: bold;
}

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

对于那些一般不熟悉inherit关键字或CSS继承的人来说,这可能并不明显.但它起作用的原因是因为font-weight,像所有其他字体属性一样,本质上是继承的,实际上bolder和lighter关键字值是基于继承的值.从规格:

bolder
指定比继承值更大的权重.

lighter
指定比继承值更轻的权重.

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

(也是CSS范围的)initial关键字具有相同的效果,normal因为属性的初始值(font-weight由规范定义)实际上是normal.但是,由于font-weight是一种遗传属性,属性默认为(用于当没有级联值)的继承,而不是初始值normal-设定initial明确地导致级联值的initial,哪些块继承,从而导致计算出的值的400 .