我应该将默认字体大小设置在body还是html元素上？

Question

我应该将默认字体大小设置在body还是html元素上？

htmlcssfont-size

69

我喜欢在创建网站时使用em。因此，我为body元素设置了默认的font-size为100.01%。

我的问题是，我应该将默认的font-size设置在body还是html元素上？两者之间是否有优缺点？

- joshnh

3

顺便问一下，为什么是100.01%？如果我没记错的话，这修复了一个只存在于某些旧版Opera中的错误，而这些版本现在也已经不再使用了。 - thirtydot

1

@thirtydot：这是一种弥补旧版Opera和Safari舍入误差的方法，因为它们会将100％呈现为太小或太大。 - tw16

@tw16 所以我假设它不再需要了？使用的 Opera 版本是哪个？ - joshnh

5

我认为我们现在的对话有点像 Opera 5/6 的时期，那已经是很久以前的事了。 - tw16

3个回答

30

如果您真的想遵循规则并保持灵活性，您应该考虑以下内容：

- `html` 的字体大小是根字体大小，这意味着它将被用作 rem 计算的基础，但仅限于此，不能用于实际文本大小计算：它只是某些浏览器的一种技巧。 - `body` 的字体大小是文本的默认字体大小：除非覆盖定义，否则所有文本都应该具有此大小。 - 特殊元素应该使用 rem 大小，并备用像素大小。

CSS 中的示例代码如下：

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

请注意，虽然所有页面元素都应继承自 body 定义，但您可以使用包含所有标签的定义，例如在 HTML 重置中经常看到的定义方式。

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

我不建议进行此重置。标准的制定是为了帮助您避免这种诡计。

在IT技术中，重置通常指恢复设备或系统的默认设置。然而，作者并不推荐这种做法，并提醒人们要遵守相关标准规定，切勿使用不当的方法进行操作。

- Ninj

1

这个最后的全标签建议会使<p>元素内部的<a>元素变小75％，这（可能）不是你想要的。其他嵌套元素类似。您可以使用“rem”进行修复，但我不同意首先进行此全标签“重置”。只需设置<body>标记，并可能添加font-size: inherit;以进行重置。 - nvreez

1

糟糕，应该是“rem”。请注意，我并不喜欢这种全标签重置的方法，但有时候对于一些表现奇怪的浏览器（谁说的IE？）来说，这是一个很好的解决方法。我正在进行更正，谢谢。 - Ninj

嗨@Ninj，简短的问题，你为什么要将<body>的font-size设置为em单位而不是rem单位？我猜结果是一样的，因为<html>是<body>的父元素，而<html>也是根元素，但如果你最终使用rems作为主要大小单位，使用rems可能更清晰。谢谢！ - Alex MM

据我所记（这是一个旧案例），原因是“rem”恰好指的是页面字体大小，这会看起来像一个无限循环（尽管实际上可能有效）。 - Ninj

@Ninj 你好！根据你解释的第一段内容以及在MDN CSS长度数据类型文档和MDN字体大小文档中找到的rem定义，rem单位（也称为根元素em）与根元素大小相关，根元素大小是<html>标签。我只想知道你这样做的原因，但我相信在这种情况下，无论是em还是rem都会产生相同的结果。 - Alex MM

27

我认为在 html 或 body 中设置基本的 font-size 来适应使用 ems 的大小没有任何优势或劣势；它们都会产生相同的效果。

与问题无关：

不过，我建议使用不同的默认 font-size。我会将其设置为：

body {
    font-size: 62.5%;
}

这样做会将默认的font-size从16px降至10px，这样选择font-size就更容易了，因为不需要进行复杂的计算。这意味着1em等于10px，所以计算px大小只需要乘以10：

1.0em=10px
1.4em=14px
1.8em=18px
2.2em=22px

- tw16

6

无论正文字体大小是多少，数学本身并不是问题，但是在涉及行高和下边距时，数字仍然会变得混乱。感谢您的回答！ - joshnh

2

@joshuanhibbert：数学部分是作为我的主要答案的一个建议，即选择其中之一并没有优劣之分。 - tw16

7

只是出于好奇，如果浏览器的默认字体大小为16px，你为什么要将正文字体大小设置为62.5％以达到10px呢？你不如直接将其设为10px，然后仍然可以基于这个10px使用rem单位，不是吗？ - bernk

7

CSS巫师撰写了一篇反对使用62.5％的文章，除非你真的想要一个基础字体大小为10px。我认为使用62.5％方法的主要原因是懒惰，这是一件好事。好的开发人员都是懒惰的。然而，这种懒惰是误导性的；它实际上会让你更加辛苦。你必须对所有元素定义字号，而不仅仅是一次，并让它们继承，当一个明确大小的元素放置在另一个元素中时，你必须解决那些可怕的继承问题。 - notapatch

2

这样怎么样……html { font-size: 62.5% } body { font-size: 160% } 这样，您仍然可以使 1rem == 10px，但是在文档正文中，1em 的大小仍然从相同的值开始（即 1em == 16px）。两全其美？ - Stephen M Irving

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- joshnh · Accepted Answer

60

现在rem单位开始流行起来，建议在根元素（html标签）上设置基础字体大小（rem代表root em）。

- joshnh

3

小心使用REM和IE9。我尝试将其用于更多的内容，而IE浏览器并没有像其他浏览器一样正确识别REM单位，效果非常糟糕。 - Bill Rosmus

3

记住，如果你需要使用px或者em作为备选方案，只需要添加一条额外的声明即可，确保备选值在rem值之前。当然，这里的难点在于需要计算出绝对值，否则使用rem单位时不需要这样做。 - BoltClock

3

如果有提供一个例子的话，我会非常感激。 - armen