为什么字体没有变得越来越大？字体继承是否会造成问题？
谁能向我解释为什么 p 标签以及 div 和嵌套在其中的 p 标签不继承 font-size ？还有锚标签？难道他们不应该继承body被覆盖的font-size:160%，变得越来越大吗？
如您所知，CSS 的第一部分是 Eric Meyer 的重置样式的一部分。如果我的理解是对的，font-size属性不应该放在font下面只有一个才能生效吗？难道不是因为级联效应而被覆盖了吗？
实际上，如果您尝试更改 font-size:100%;到其他东西（例如：200%），你会发现它没有任何视觉效果（至少没有立即的效果）。
是不是字体：inherit;风格做了一些我不知道的事情？这让我很生气……不明白这一点。
预先感谢人们。
演示：' http://tinkerbin.com/GMEyX3is '
<head>
<style>
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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body{
font-size: 160%;
}
</style>
</head>
<body>
<p>Paragraph <a href="#">OUTSIDE</a> of div</p>
<div>
<p>Paragraph INSIDE of div</p>
</div>
</body>
Can anyone explain to me why the font-size isn't being inherited by the p tag, and by the div and the p tag nested in it? As well as the anchor tag? Shouldn't they be inheriting the body's overwritten font-size:160%, becoming bigger and bigger?
The first part of the css is part of Eric Meyer's reset style as you know. If my understanding is right, shouldn't the font-size property be placed below the font only one for it to take effect? Isn't it simply being overwritten thanks to the cascading effect?
Actually if you try and change that font-size:100%; to something else (eg: 200%) you'll notice it takes no visual effect (no immediate one, at least).
Is it the font: inherit; style that does something I'm not aware of? This is making me quite mad... not figuring this one out.
Thanks in advance people.
DEMO: ' http://tinkerbin.com/GMEyX3is '
<head>
<style>
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, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body{
font-size: 160%;
}
</style>
</head>
<body>
<p>Paragraph <a href="#">OUTSIDE</a> of div</p>
<div>
<p>Paragraph INSIDE of div</p>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这里忽略设置
font-size: 100%，因为设置font:inherit（稍后出现）会覆盖它。设置font始终会设置所有与字体相关的属性，其中包括font-size:inherit。继承的值通常取决于属性，但在大多数情况下，在这种情况下，是父元素的计算值。因此，无论body的font-size设置产生什么值，都将使用以像素或点为单位的值，具体取决于浏览器。继承的是这个计算值，而不是百分比。不支持
inherit值的浏览器将忽略此设置并使用font-size: 100%，这当然会产生相同的大小。The setting
font-size: 100%is ignored here, since the settingfont: inherit(appearing later) overrides it. Settingfontalways sets all font-related properties, and this includesfont-size: inherit. The inherited value generally depends on the property, but it is most cases, and in this case, the computed value of the parent element. So whatever value the setting offont-sizeforbodyresults in, a value in pixels or points, depending on browser, will be used. It is this calculated value, not the percentage, that is inherited.Browsers that do not support the value
inheritwill just ignore this setting and usefont-size: 100%, which of course results in the same size.您已将
body上的字体大小设置为 160%。这意味着页面上的所有元素现在的字体大小将比浏览器使用的基本字体大小大 60%。当重置样式中的字体大小设置为 100% 时，基本上意味着所有元素的字体大小将与浏览器的基本字体大小相同。因此，即使像
、
... 这样的标题标签也将采用相同的字体大小。为了使每个嵌套元素的字体大小变得更大，您必须在 div 上定义字体大小，如果需要，还可以在 p 上定义字体大小。所以也许你可以这样做：如果你将 font-size 定义为 100%，它将继承其父元素的 font-size。
You've set the font-size on the
bodyto be 160%. That means that all the elements across the page will now have a font-size starting from 60% more than the base font ize used by the browser.When the font-size is set to 100% in the reset styles, it basically means that the font-size for all the elements will be the same as the base font size of the browser. So even header tags like the
<h1>, <h2>... will take the same font-size. In order for the font size to become bigger with each nested element, you will have to define a font-size on the div and if required, the p. So perhaps you can do something like:If you define the font-size as 100%, it will inherit the font-size of it's parent element.