有没有办法说“使用当前字体粗细”而不使其更轻/更粗？答案

【问题标题】：Is there a way to say "use the current font weight" without making it lighter/bolder?有没有办法说“使用当前字体粗细”而不使其更轻/更粗？
【发布时间】：2015-12-23 18:18:12
【问题描述】：

font-weight 属性支持 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 具有相同的效果。

【问题讨论】：

我对这个问题有点困惑：lighter 和 bolder 关键字已经相对于当前字体粗细（继承自最近的祖先指定字体粗细，或浏览器默认值（如果没有指定）。
@Mike 'Pomax' Kamermans：是的，我的问题是如何在不使其更轻或更粗的情况下指定当前重量。让我看看我能不能想出一个更好的标题。
我仍然不确定你在问什么 - 当前的权重只是继承，除非其他规则覆盖它（或者，真的覆盖它），否则它就是应用的。部分问题在于您谈论“周围文字”。 HTML/CSS 中没有这样的东西。有元素树，你展示的是一棵树，它有两个彼此无关的段落。您显示的跨度已经与它们所在的<p> 相同，因为继承，所以......实际问题是什么？
@Mike 'Pomax' Kamermans：实际的问题是没有意识到继承是使元素与其父元素具有相同权重的原因 - 因此我的问题与自我回答相结合。并不是每个人都从元素树的角度来思考。（我有，但我显然在这里放了很多屁。）
他们没有，这就是为什么当有人似乎没有牢牢掌握 DOM 树的基础知识以及它如何在结合级联样式表的“级联”部分

标签： css fonts

【解决方案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 关键字值是基于继承的值。来自spec：

加粗
指定比继承值更粗的粗细。

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

因此，可以通过使用inherit 关键字来指定继承的值，保持不变。

（也是 CSS 范围的）initial 关键字与 normal 具有相同的效果，因为按照规范定义，font-weight 属性的初始值实际上是 @ 987654336@。然而，因为font-weight 是一个继承属性，所以该属性默认为（当没有级联值时）继承而不是normal 的初始值——显式设置initial 会导致initial 的cascaded value ，这会阻止继承，从而导致 computed value 为 400。

【讨论】：

【解决方案2】：

我们还可以考虑值unset，如果从父元素继承了一个值，它将表现为inherit，当没有继承值时将下降到initial。

如果一个属性的级联值为unset关键字，那么如果是继承属性，则视为inherit，如果不是，则视为initial。此关键字有效地清除级联中较早出现的所有声明值，正确继承或不适合属性^ref

strong {
  font-weight: unset;
  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>

值得注意的是，IE 不支持此值 (https://caniuse.com/#feat=css-unset-value)（不过并不奇怪）

【讨论】：