流体字体大小不起作用。与 css 冲突重置 "font: inherit;"。为什么？

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 样式表中编写代码以获得介于 16 像素和 40 像素之间的流畅字体大小；

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 重置代码中的 "font: inherit;" 覆盖。因此它似乎不适用于流体代码。有任何想法吗？它是否有效？

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

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

Answer 1

MDN: inherit

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element.

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

如果所有元素（如 p）不会将 font-size 设置为 inherit 而是具有计算值，则您无法更改 a 的字体大小某些元素并让这些设置传播到它的后代，但您也需要在每个后代上设置它。因此，将 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，它将传播到 children。

* {
  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>

流体字体大小不起作用。与 css 冲突重置 "font: inherit;"。为什么？

Fluid font-size not working. Conflict with css reset "font: inherit;". Why?

css

typography

fluid