html - Is the default font-size of every browser 16px? Why?

Question

Welcome To Ask or Share your Answers For Others

html - Is the default font-size of every browser 16px? Why?

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Is the default font-size of every browser 16px? Why?

CSS3 defines new a length unit for font-size called rem. This allow us to compute element's font-size relate to the root element (html element).

To compute the font-size more easily , we usually assume the root element's font-size is 16px, therefore the CSS usually ends up like this:

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

So, every element height with rem is relative to 10px, for example

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

I cant find why we assume we can multiply by 16px? How can we trust every browser will have the same base value of 16px? Is there is a standard description about the pre-defined 16px?

Ref

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T02:47:35+0000

The base font-size is determined by the users pre-defined preferences within the browser.

In almost every browser, 16px is the standard for proportional fonts. This can also change dependant on if the font uses serifs or is a fixed width font.

Just remember, em is relative to the element it is used on or relative to the inherited parents font-size, and is proportional to that. rem however, uses the root html elements.

For example:

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>

Categories

html - Is the default font-size of every browser 16px? Why?

html - Is the default font-size of every browser 16px? Why?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags