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

Question

我想将可变字体大小与https://css-tricks.com/snippets/css/fluid-typography/中的代码一起使用。但是我的CSS Meyer Reset（字体：继承；）似乎覆盖了代码。不知道为什么这是代码：

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;
  }
}

然后，当我在浏览器中检查浏览器大小为700像素时，后者的CSS流畅代码会被“字体：继承；”覆盖。在CSS重置代码中。因此，它似乎不适用于流畅的代码。有任何想法吗？是否有效？

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

Answer 1

MDN: inherit

[inherit CSS关键字使指定的元素从其父元素获取属性的计算值。]]

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

如果p不会将font-size设置为inherit，而是会使用固定值，那么您将无法更改某个元素（包括其后代）的字体大小，但需要将其设置为每个元素。因此，将font-…属性设置为inherit是预期的行为。