字体大小在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 fonts（例如Times New Roman默认网络字体）的大小为em，对应于1000个单位。相反，TrueType fonts的em大小为1024个单位。

em的大小也称为point的大小，在屏幕上大约为0.35136mm。您看到的字体的实际大小主要取决于创建字体时开发人员如何设计字体字形。还有一些影响因素，例如每个浏览器如何呈现所述字体以及查看字体的分辨率。

这里有几种字体并排显示，因此您可以看到字体本身控制着字体，但是它们都保留了一点“填充”：

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。

Answer 2

字体大小是最高字符的顶部到最低字符的底部之间的距离。它不会影响宽度，宽度通常因字符而异。 “ Ay”应该与您的盒子具有相同的高度，但可能不会具有相同的垂直对齐方式，因为在计算垂直对齐方式时通常会忽略下降位置。

Answer 3

不，这会有所不同。

font-size属性指定字体的大小或高度，<div>仅用作其他HTML元素的容器。

如果您希望<div>与字体大小相同， 试试这个计算：

 'font-size': (height/2) + 'px',
  'line-height': height + 'px'