blocks|key|152751|text|来自CSS+2.1规范|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|152752|“中等”值是用户首选的字体大小，用作参考中间值。|blockquote|152753|如果浏览器不这样做，那么浏览器是错误的。|152754|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/CSS21/fonts.html#font-size-props^0|2|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>From <a href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" rel="noreferrer">the CSS 2.1 specification</a>:</p>

<blockquote>
  <p>The 'medium' value is the user's preferred font size and is used as the reference middle value.</p>
</blockquote>

<p>If a browser doesn't do this, then the browser is buggy.</p>


blocks|key|1151845|text|它将基于父元素，以尊重级联。如果有帮助的话，我总是这样做字体大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1151846|body+{
+++font:+normal+100%25+"Arial","Helvetica",sans-serif;
}
p,+li,+td+{
+++font-size:+.85em;
}
li+p,+td+p+{
+++font-size:+1em;
}|code-block|syntax|javascript|1151847|全身心投入到身体上，然后用它们做其他的事情。我从不使用“较小”或“中等”之类的词。这样我有更多的控制权。|1151848|编辑：|offset|length|style|BOLD|1151849|请看Jim关于“媒体”是一个绝对字体大小的评论。很好注意到。|1151850|entityMap^0|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@$K|W|L|X|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>It will be based upon the parent element, so as to respect the cascade. If it is helpful, I always do my font sizes this way:</p>

<pre><code>body {
   font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
   font-size: .85em;
}
li p, td p {
   font-size: 1em;
}
</code></pre>

<p>Go 100% on the body, then use em for everything else. I never use "smaller" or "medium" or anything like that. I have more control this way.</p>

<p><strong>Edit:</strong></p>

<p>Please see Jim's comment about "medium" being an absolute font size. Good to note.</p>


blocks|key|838852|text|如前所述，medium是由UA+(浏览器)设置的，但是您仍然可以通过使用rem获得您想要的行为。rem相对于根元素(特别是<html>元素，而不是<body>)，因此受根元素样式的影响。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|838853|有关演示，请参见这把小提琴。|838854|​|838855|html
{
++font-size:+60px;
}

#mediumBlock
{
++font-size:+medium;
}

#remBlock
{
++font-size:+1rem;
}

#halfRemBlock
{
++font-size:+0.5rem;
}|code-block|syntax|javascript|838856|<div+id="inheritedBlock">
++Foobar+inherited
</div>
<div+id="mediumBlock">
++Foobar+medium
</div>
<div+id="remBlock">
++Foobar+rem
</div>
<div+id="halfRemBlock">
++Foobar+0.5rem
</div>|838857|838858|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Aides/ap5awqbp/^0|5|6|10|3|1C|3|1P|6|21|6|0|8|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1G|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1H|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>As noted before <code>medium</code> is set by the UA (browser) but you can still get the behaviour you wished by using <code>rem</code>. <code>rem</code> is relative to the root element (notably the <code>&lt;html&gt;</code> element, not the <code>&lt;body&gt;</code>) and thus affected by styling of the root element.</p>

<p>See <a href="https://jsfiddle.net/Aides/ap5awqbp/" rel="nofollow">this fiddle</a> for demonstration.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html
{
  font-size: 60px;
}

#mediumBlock
{
  font-size: medium;
}

#remBlock
{
  font-size: 1rem;
}

#halfRemBlock
{
  font-size: 0.5rem;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="inheritedBlock"&gt;
  Foobar inherited
&lt;/div&gt;
&lt;div id="mediumBlock"&gt;
  Foobar medium
&lt;/div&gt;
&lt;div id="remBlock"&gt;
  Foobar rem
&lt;/div&gt;
&lt;div id="halfRemBlock"&gt;
  Foobar 0.5rem
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|838839|text|字体大小关键词(xx-小，x-小，小，中，等等)是基于用户默认的字体大小，即中等字体。它还可以用于更改子元素相对于父元素的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|838840|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Font Size Keywords (xx-small, x-small, small, medium, etc..) are based on the users default font size which is medium.  It can also be used in the term of changing the size of a child element in relation to the parent element.</p>


blocks|key|842924|text|我认为，如果将默认大小设置为容器或主体这样的元素，那么子元素中的任何相对字体大小都是基于父元素的。只有在没有在任何地方指定字体大小的情况下，它才会默认为浏览器(浏览器的大小各不相同)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|842925|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think if you set a default size to a element like a container or the body, then any relative font-sizes in the children are based on the parent elements. Only if you don't specify a font-size anywhere does it just default to the browser (which they all have different sizes at that).</p>


<p>in "CSS: The missing manual" the author says that font-size: medium (or other size keywords) sets the font relative to the <em>browser's</em> base font size.</p>

<p>But what I'm seeing in FF2 and IE6 is that it sets the font size to what I specified in the .CSS  HTML or BODY style (which is much preferred).</p>

<p>If it works the latter way, this is very handy if you have nested styles and you know you want some text to be the body font-size (i.e., "normal sized text").</p>


Does the CSS 'font-size: medium' set font to .Body font size or to the *browser*'s base font size?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

在"CSS:缺少的手册“中，作者说字体大小:中等(或其他大小关键字)相对于浏览器的基本字体大小设置字体。但我在FF2和IE6中看到的是，它将字体大小设置为我在.CSS HTML或BODY样式中指定的字体大小(这是首选的)。如果以后一种方式工作，如果您有嵌套样式，并且您知道需要一些文本作为正文字体大小(即“正常大小的文本”)，这是非常方便的。

问CSS的字体大小:中等字体设置为.Body字体大小还是browser的基本字体大小？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的字体大小:中等字体设置为.Body字体大小还是*browser*的基本字体大小？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的字体大小:中等字体设置为.Body字体大小还是browser的基本字体大小？
EN