CSS 'font-size: medium' 是否将字体设置为 .Body 字体大小或 *browser* 的基本字体大小？答案

【问题标题】：Does the CSS 'font-size: medium' set font to .Body font size or to the *browser*'s base font size?CSS 'font-size: medium' 是否将字体设置为 .Body 字体大小或 *browser* 的基本字体大小？
【发布时间】：2008-09-18 16:36:54
【问题描述】：

在“CSS：缺失的手册”中，作者说 font-size: medium（或其他尺寸关键字）设置相对于浏览器的基本字体大小的字体。

但我在 FF2 和 IE6 中看到的是，它将字体大小设置为我在 .CSS HTML 或 BODY 样式中指定的大小（这是首选）。

如果它以后一种方式工作，如果您有嵌套样式并且您知道您希望某些文本成为正文字体大小（即“正常大小的文本”），这将非常方便。

【问题讨论】：

标签： css

【解决方案1】：

来自the CSS 2.1 specification：

'medium' 值是用户的首选字体大小，用作参考中间值。

如果浏览器不这样做，则浏览器有问题。

【讨论】：

【解决方案2】：

它将基于父元素，以尊重级联。如果有帮助，我总是这样设置字体大小：

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

100% 用在身体上，然后用 em 做其他事情。我从不使用“较小”或“中等”或类似的东西。这样我有更多的控制权。

编辑：

请参阅 Jim 关于“中等”是绝对字体大小的评论。值得一提。

【讨论】：

尺寸关键字是绝对的。它们的工作方式与您使用的相对尺寸不同。

【解决方案3】：

字体大小关键字（xx-small、x-small、small、medium 等）基于用户默认的中等字体大小。它也可以用于改变子元素相对于父元素的大小。

【讨论】：

【解决方案4】：

如前所述，medium 由 UA（浏览器）设置，但您仍然可以使用 rem 获得您希望的行为。 rem 相对于根元素（特别是 <html> 元素，而不是 <body>），因此受根元素样式的影响。

请参阅this fiddle 进行演示。

html
{
  font-size: 60px;
}

#mediumBlock
{
  font-size: medium;
}

#remBlock
{
  font-size: 1rem;
}

#halfRemBlock
{
  font-size: 0.5rem;
}

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

【讨论】：

【解决方案5】：

我认为，如果您为容器或主体等元素设置默认大小，那么子元素中的任何相对字体大小都基于父元素。只有当您没有在任何地方指定字体大小时，它才会默认为浏览器（它们都有不同的大小）。

【讨论】：

'medium' 是绝对字体大小，而不是相对大小。