设置正文标签的字体大小

时间：2018-08-08 11:38:33

标签： html css

我一直在尝试配置一个基本的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。 <p>标签中的所有内容仍为16px，但是<h1>-<h6>会恢复为浏览器样式表中指定的原始大小。为什么未将所有文本设置为16px？

另一个例子：

body {
  font-size: 12px;
}

为什么<h1>-<h6>的字体大小为12px？ <h1>-<h6>的确变小了（12/16 = 0.75时降低了75％）。我希望h1为12px或保持相同的默认值，因为在用户代理样式表中为h1-h6指定的值更多。

规则在指定百分比方面如何工作？在设置样式表以便可以使用REM方面的最佳实践是什么？

4 个答案:

答案 0 :(得分：6)

h1的默认font-size设置为2em，表示2 x the font size of the parent element。与其他标题相同，它们都具有使用font-size单位指定的em。

enter image description here

在font-size中使用百分比也相对于父font-size，并且表示p x the font size of the parent element，其中p是0（对于0％）和{ {1}}（100％）。

因此，如果您在正文中指定1，则正文将具有100%（默认为16px），而font-size将具有h1。

您可以使用相同的逻辑为其他标题找到32px。 

font-size
body {
  font-size:100%;
}

如果您在正文中指定<h1>this a text</h1>，则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的默认值，因此它将仅继承正文中指定的值。

您可以使用开发工具轻松地在计算选项卡中检查这些值：

enter image description here

来自documenation：

  

em值​​的大小是动态的。定义字体大小时   属性，则em 等于适用于的字体的大小   所涉及元素的父级。如果尚未设置字体大小   页面上的任何地方，那么它就是浏览器的默认设置，通常是   16px

对于百分比：

  

相对于父元素的字体大小的font-size正值。

答案 1 :(得分：3)

  

为什么<h1>-<h6>的字体大小不为12px？

<h1>和相关元素在您更改祖先的字体大小时不会将其字体大小更改为与祖先相同，这仅仅是因为未设置其默认字体大小（在浏览器内置的样式表中）到100%，1em，inherit或类似名称中，并且您没有指定其他字体大小来覆盖浏览器提供的字体大小。

  

<h1>-<h6>的确变小了（因为12/16 = 0.75，缩小了75％）。我希望h1为12px或保持相同的默认值，因为在用户代理样式表中为h1-h6指定的值更多。

在浏览器样式表中指定的值（至少在我的浏览器中）使用em单位，因此它是比例（对于<h1>是两倍）。父元素的字体大小。

  

规则在指定百分比方面如何工作？

用于祖先元素（px，%或其他任何内容）的字体大小的单位选择无关紧要。

答案 2 :(得分：1)

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 :(得分：-3)

在我这边工作得很好。唯一的可能是，您的HTML中缺少指向CSS文件的链接... :) 否则，请确保为同一属性尝试内联样式。

相关问题
最新问题