每个浏览器的默认字体大小都是16像素吗？为什么？

Question

每个浏览器的默认字体大小都是16像素吗？为什么？

42

CSS3 定义了一个新的长度单位 rem 用于 font-size，它允许我们计算元素的 font-size 相对于根元素（html 元素）。

为了更轻松地计算 font-size，我们通常假设根元素的 font-size 为 16px，因此 CSS 通常写成这样：

html { font-size:62.5%; } // 10px = 16px * 0.625

因此，使用rem设置的元素高度相对于10px，例如

p{ font-size : 1.4rem ;} // 14px = 10px * 1.4

我找不到为什么我们假定可以用 16px 乘以其他值的原因。我们如何确保每个浏览器都有相同的 16px 基准值？是否有关于预定义 16px 的标准说明？ 参考资料：

- monjer

可能是传统。font-size的初始值用于计算html的默认字体大小以及在媒体查询中计算rem和em，其值为“medium”。16px来自浏览器中用户的偏好设置。请参见https://dev59.com/omkv5IYBdhLWcg3wnCHH#10470734。 - BoltClock

谢谢您的询问，monjer，还有感谢@Stewartside的回答--我已经试图解决这个问题2个小时了。 - Wellspring

2个回答

-1

我是否遗漏了什么。这是我找到的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .fs-1 {
      font-size: 20px;
    }
    
    .fs-2 {
      font-size: 15pt;
    }
    
    .fs-3 {
      font-size: 1rem;
    }
    
    .fs-4 {
      font-size: 1em;
    }
  </style>
</head>

<body>
  <div>
    This is font-size default
  </div>
  <div class="fs-1">
    This is font size 1 - 20px
  </div>
  <div class="fs-2">
    This is font size 2 - 15pt
  </div>
  <div class="fs-3">
    This is font size 3 - 1rem
  </div>
  <div class="fs-4">
    This is font size 4 - 1em
  </div>
</body>

</html>

我用 Chrome 加载，每行看起来都一样，所以 16px 是默认字体大小还是 20px？1rem = 20px = 15pt？？？

- Rich R

1

它们在我的电脑上正常显示，我也使用Chrome浏览器。第一行=16px。第二行=20px。第三行=15pt（1pt等于1/72英寸）。第四行=1rem（16px），因为它相对于根元素，即16px。第五行=1em（16px），因为它相对于其父元素（即根元素）仍然是16px。 - nnamerz

-1 表示将问题发布为答案。正如 @nnamerz 已经说过的，如果您没有更改浏览器的默认字体大小，则使用 1rem = 16px 可以正确呈现。 - Wes Thompson

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

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

- Stewartside · Accepted Answer

基本的字体大小由用户在浏览器中预定义的偏好决定。在几乎所有的浏览器中，16像素是比例字体的标准。这也可以根据字体是否使用衬线或固定宽度字体而改变。请记住，em相对于其所用的元素或相对于继承父级的字体大小，并与之成比例。但是rem使用根HTML元素。例如：

html {
  font-size: 16px;
}
h1 {
  font-size: 2em; // 32px
}
p {
  font-size: 1em; // 16px
}
.someClass {
  font-size: .75em; // 12px
}
.someClass p {
  font-size: 2em; // 24px
}
.someClass p .test {
  font-size: 1.25rem; // 20px
}

<html>
<h1>2em Title Text</h1>
<p>Normal Element Text</p>
<div class="someClass">
  someClass font size
  <p>SomeClass with em</p>
  <p><span class="test">someClass p element with class test</span>
  </p>
</div>

</html>