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

托拜厄斯·安德森

我想使用来自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 重置代码中。因此它似乎不适用于流体代码。有任何想法吗？它是否有效？

图片。浏览器中的检查工具显示后面的代码没有激活？

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

尼采

MDN：继承

继承 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。