字体大小在css中实际意味着什么？

Question

我有一个div元素,宽度为500px,高度为500px.div有一个字符"A".我将div的字体大小设置为500px.我将角色置于div中心.现在,不应该字体填充div的整个高度/宽度,因为div的高度/宽度和字体大小相等？

div {
	border:1px solid black;
	font-size:500px;
	height:500px;
	width:500px;
	line-height:500px;
	box-sizing:content-box;
	text-align:center;
}

<div>A</div>

Answer 1

CSS font-size属性表示为字体分配指定的空间量; 它不必使用所有这些分配的空间.OpenType字体(例如Times New Roman默认Web字体)的em大小应相当于1000个单位.相反,TrueType字体的em大小为1024个单位.

的em尺寸也被称为point尺寸,大致在屏幕上0.35136毫米.您看到的字体的实际大小主要取决于开发人员在创建字体时如何设计字体字形.还有一些因素在起作用,例如每个浏览器如何呈现所述字体,以及查看字体的分辨率.

这里有一些并排的字体,所以你可以看到字体本身控制了一边,但它们都保留了一点'填充':

div {
  border: 1px solid black;
  font-size: 50px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  box-sizing: content-box;
  text-align: center;
  float: left;
}

.a {
  font-family: "Times New Roman", Times, serif;
}

.b {
  font-family: "Times New Roman", Times, serif;
  font-weight: bold;
}

.c {
  font-family: Arial, Helvetica, sans-serif;
}

.d {
  font-family: Georgia, serif;
}

.e {
  font-family: Courier, Monaco, monospace;
}

.f {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

<div class="a">A</div>
<div class="b">A</div>
<div class="c">A</div>
<div class="d">A</div>
<div class="e">A</div>
<div class="f">A</div>

请注意,例如,Comic Sans下降幅度明显低于Courier.