Есть ли способ сказать "использовать текущий вес шрифта", не делая его легче/смелее?

Свойство 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>

Ответ 1

font-weight не имеет специального значения ключевого слова для "текущего веса". Вместо этого вы используете ключевое слово inherit для CSS, чтобы наследовать вес от родительского элемента (элемента, который содержит так называемый "окружающий текст" вместе с рассматриваемым элементом):

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>

Ответ 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>