流体字体大小不起作用。与 css 重置“字体：继承；”冲突。为什么？

Question

我想使用带有 https://css-tricks.com/snippets/css/fluid-typography/ 代码的流畅字体大小。但是我的 CSS Meyer Reset (font: inherit;) 似乎覆盖了代码。我不知道为什么？代码如下：

CSS 重置 css：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;

}

稍后在 css 样式表中的代码以获得 16px 和 40px 之间的流畅字体大小；

html {
  font-size: 16px;
}

@media screen and (min-width: 320px) {
  :root {
    font-size: calc(16px + (40 - 16) * ((100vw - 320px) / (1000 - 320)));
  }
}
@media screen and (min-width: 1000px) {
  :root {
    font-size: 40px;
  }
}

然后，当我在浏览器中以 700px 浏览器大小进行检查时，后一个 css 流体代码被“字体：继承”覆盖。在 CSS 重置代码中。因此，它似乎不适用于流体代码。有任何想法吗？它是否有效？

Picture. Inspection tool in browser shows that the latter code is not active?

流体字体代码有效，但让我感到困惑的是，检查器工具显示它没有被应用，而只显示重置 css font:inherit 被应用。为什么？

Answer 1

MDN: inherit

inherit CSS 关键字导致指定它的元素从其父元素获取属性的计算值。

因此，如果媒体查询的 css 规则应用于 :root 并且其后代都具有 font: inhert 他们将从 :root 继承字体设置

如果所有元素（如p）不会将font-size 设置为inherit，而是具有计算值，那么您不能更改某个元素的字体大小并让这些设置传播到它的后代，但您也需要在每个后代上设置它。因此，将 font-… 属性设置为 inherit 是预期的行为。

这里font-size直接应用于每个元素，如果你改变p的字体大小它不适用于span：

* {
  font-size: 20px;
}

p {
  font-size: 10px;
}

<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>

另一方面，如果font-size 是inherit，那么如果您设置font-size，它将传播给孩子。

* {
  font-size: inherit;
}

div {
  font-size: 20px;
}


p {
  font-size: 10px;
}

<div>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd <span>gubergren</span>, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
</div>