logo标签列表

设置body标签的字体大小

htmlcss
5
我一直在尝试配置一个基本的CSS模板，用于开始使用REM。我看到了设置以下代码的方法：body { font-size: 62.5% };，这样数学计算会更容易（1rem = 10px，16px是默认字体大小）。
我不确定是否喜欢这种方式，因为如果我的基线字体大小不是10px，则需要指定<h1>-<h6>标签和<p>标签的大小。
我一直在尝试不同的方法，并且对于px和%如何与字体大小相关联感到非常困惑。请看以下示例：
<html>

<body>

  <header>
    <h1>Testing h1</h1>
    <h2>Testing h2</h2>
  </header>

  <main>
    <p>Random paragraph</p>
  </main>
</body>

</html>

考虑以下CSS：

body {
 font-size: 100%;
}

我希望浏览器可以以默认大小16px呈现字体。在

标签中的任何内容仍然是16px，但

-

会恢复为浏览器样式表中指定的原始大小。为什么不将所有文本设置为16px？
另一个例子：
body {
  font-size: 12px;
}

为什么

-

字号不能设为12px？

-

的字号会变小（按照比例缩小75%，因为12/16=0.75）。我原本以为h1的字号要么是12px，要么保持默认值不变，因为用户代理样式表中为h1-h6指定的值更具体。

关于百分比规则的工作方式是怎样的？在设置样式表时，REM应该如何使用才能达到最佳实践？
为什么你不先使用Normalize CSS呢？ - Tharaka Nilupul Dharmabandu
我应该指出我实际上确实使用normalize.css。但我不明白这会对任何事情产生影响吗？据我所见，normalize.css并不会对字体大小产生任何影响。 - user483934
4个回答
10

h1标签的默认font-size设置为2em，这意味着2倍于父元素的字体大小。其他标题也是如此，它们都使用em单位指定了font-size。

enter image description here

使用{{font-size}}的百分比，也相对于父元素{{font-size}}，意味着{{p x the font size of the parent element}}，其中{{p}}是在{{0}}（表示0%）和{{1}}（表示100%）之间的值。
因此，如果您在中指定了{{100%}}，则将具有{{16px}}（默认{{font-size}}），并且

将具有{{32px}}。 您可以使用相同的逻辑找到其他标题的{{font-size}}。 

body {
  font-size:100%;
}
<h1>this a text</h1>

如果在body中指定了12px，那么h1将会有24px。 

body {
  font-size:12px;
}
<h1>this a text</h1>

指定62.5%将使正文字体大小为10px，而h1的字体大小为20px

body {
  font-size:62.5%;
}
<h1>this a text</h1>

由于p没有默认的font-size值，它将简单地继承在中指定的值。

您可以使用开发工具轻松检查计算标签中的这些值：

enter image description here

来自文档：

em值的大小是动态的。在定义字体大小属性时，一个em等于应用于问题元素的父级的字体大小。如果您没有在页面上设置字体大小，则为浏览器默认值，通常为16px。

对于百分比：

相对于父元素的字体大小的正<percentage>值。

这是一个非常详细的答案，非常感谢您特别指出 h1-h6 的默认值。在处理 REM 时，我设置了基准线体的字体大小为 100％，对于响应式设计，我设置了一些断点，其中字体大小在 max-width：768px 和 max-width: 410px 时更改为 75％和60％。这是一个好方法吗？ - user483934
@ftahir 好坏可能是基于个人观点的...如果它能正常工作且没有冲突，那么就是好的，但如果你遇到了一些问题，那么你应该重新考虑一下...只需注意不要使用非常小的字体大小，我认为我们应该避免使用小于14px的字体大小，因为对某些人来说阅读会很困难。 - Temani Afif
4

rem是相对于HTML而非BODY元素的

rem单位基于HTML元素的字体大小，而不是BODY元素。因此，您应该按照以下方式设置基础字体大小：

HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */

代替

BODY {font-size: 62.5%; } /* Does NOT affect `rem` */

HTML字体大小可能会影响滚动速度

请注意，至少在某些浏览器中，HTML元素的字体大小会影响滚轮滚动步长：当HTML元素的字体大小较小时，步长就较小，滚动就较慢。

重置所有元素的字体大小

要重置所有元素的字体大小，可以使用通用选择器：

* {font-size: 100%; }

或者：

* {font-size: 1em; }

跨浏览器一致性的正确DOCTYPE

此外，请确保在HTML文档开头放置正确的DOCTYPE声明，以便为文档打开标准兼容模式，实现跨浏览器渲染和行为的一致性：

<!DOCTYPE html>
3
为什么<h1>-<h6>的字体大小不是12px？
当更改其祖先元素的字体大小时，<h1>和相关元素不会改变其字体大小与其祖先相同，因为它们在浏览器内置样式表中的默认字体大小没有设置为100%、1em、inherit或类似值，并且您也没有指定不同的字体大小来覆盖浏览器提供的值。 <h1>-<h6> 的确会变小（12/16 = 0.75），但此处值应大于浏览器的内置样式表中给出的值。
在我的浏览器中，浏览器样式表中给出的值使用了em单位，因此它与父元素的字体大小成比例（在<h1>的情况下翻倍）。
如何使用百分比指定字体大小的规则？无论您在祖先元素的字体大小中使用px、% 或其他任何单位，都是无关紧要的。
谢谢您的回复。您说：“...并且您没有指定不同的字体大小来覆盖浏览器提供的字体大小。” 我以为<body>标签会覆盖默认的浏览器样式表（甚至是 h 标签），因为样式表是层叠的。但是，我想我在这里忽略了优先级。我说这种情况不是这样，是因为在浏览器样式表中，h1属性是比<body>更具体的选择器，而特定性优先于后面出现的不太具体的规则。 - user483934
我曾认为body标签会覆盖默认的浏览器样式表（甚至包括h标签），因为样式表是层叠的。——当多个冲突规则应用于同一元素时，级联处理规定了规则应用的顺序。针对“body”的规则根本没有针对“h1”，所以级联并不相关。 - Quentin
"h1属性是比body更具体的选择器" - h1和body具有相同的特定性。您根本没有为h1指定规则。 - Quentin
好的，现在关于级联我更明白了。所以在body中定义font-size:12px;时，h1并没有被直接影响，但因为它是由相对值(em)定义的，所以如果body的字体大小改变，那么h1也会改变，因为body是具有定义字体大小的最近祖先元素？如果这样理解正确的话，那我想我明白了。 - user483934
@ftahir - 每个元素都将有一个定义的字体大小。body只是由您定义的唯一元素。 - Quentin
显示剩余4条评论
-3

在我的端上一切都正常。唯一的可能是你的HTML中缺少CSS文件的链接... :) 否则，为了确保，请尝试使用相同属性的内联样式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接