在“CSS:缺失的手册”中,作者说 font-size: medium (或其他大小关键字)设置字体相对于浏览器的基本字体大小。
但我在 FF2 和 IE6 中看到的是,它将字体大小设置为我在 .CSS HTML 或 BODY 样式中指定的大小(这是首选)。
如果它以后一种方式工作,那么如果您有嵌套样式并且您知道您希望某些文本成为正文字体大小(即“正常大小的文本”),这将非常方便。
在“CSS:缺失的手册”中,作者说 font-size: medium (或其他大小关键字)设置字体相对于浏览器的基本字体大小。
但我在 FF2 和 IE6 中看到的是,它将字体大小设置为我在 .CSS HTML 或 BODY 样式中指定的大小(这是首选)。
如果它以后一种方式工作,那么如果您有嵌套样式并且您知道您希望某些文本成为正文字体大小(即“正常大小的文本”),这将非常方便。
它将基于父元素,以尊重级联。如果有帮助,我总是这样设置字体大小:
body {
font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
font-size: .85em;
}
li p, td p {
font-size: 1em;
}
100% 用在身体上,然后用 em 做其他事情。我从不使用“较小”或“中等”或类似的东西。这种方式我有更多的控制权。
编辑:
请参阅 Jim 关于“中等”是绝对字体大小的评论。很好注意。
字体大小关键字(xx-small、x-small、small、medium 等)基于用户默认的中等字体大小。它也可以用于更改子元素相对于父元素的大小。
如前所述,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>
我认为,如果您为容器或主体等元素设置默认大小,那么子元素中的任何相对字体大小都基于父元素。只有当您没有在任何地方指定字体大小时,它才会默认为浏览器(它们都有不同的大小)。