看过一些资料,了解了一些关于行内盒子的概念。就想测试一下能不能表现出文本的content-area。
目前发现span元素如果只包含文本的话,高度和content-area的高度很相似。但是又存在一些疑惑。
以下代码是基于simsum字体的font-size = content-area来实现的。这个是在视频中看到的。因为我也不懂字体设计,没办法去验证。如果这个条件成立的话,请看这个代码。
<!DOCTYPE html>
<html>
<head>
<title>测试line-height决定行框盒子的高度</title>
<meta charset="utf-8">
<style type="text/css">
.text{
font-family: 宋体;
font-size: 20px;
line-height: 0px;
}
</style>
</head>
<body>
<span class="text">一个只包含文本的span元素,其高度是由文本的内容区高度撑开的吗</span>
</body>
</html>
在chrome中,span元素的高度就是20px。正好等于font-size。
但是在firefox中,span元素的高度是21.33333px。仿佛又不对。
初学者诚信求各位指点一下,在此谢过。
我用 FontForge 看了下是chrome显示的正确,firefox为什么会大1px就不懂了