深入理解css中字体

提前声明：这里有一些复杂，算是css中最复杂的知识点之一、

文字

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有几根参考线，不同的文字类型，参考线不一样。同一种文字类型，参考线一致。
例如;Consolas字体
在这里插入图片描述

font-size

字体大小，设置的是文字的相对大小

我们编程时，设置的仅仅是字体的相对大小！！！

当我们设置了相对尺寸为200px，实际尺寸为234px。
在这里插入图片描述

文字的相对大小：1000、2048、1024（有点像活字印刷术造字的框框，不等于字体实际大小）

计算机中和现实中不太一样，造字的框框的尺寸（相对大小）往往比得到的字体尺寸（实际尺寸）小一些。
在这里插入图片描述

文字顶线（图中的ascent）到底线的(descent)距离，是文字的实际大小（称作content-area，内容区）

行盒的背景，覆盖content-area。

这就是为什么我们给行盒设置背景色时，会在上下多出一部分来。因为覆盖的是内容区。

在这里插入图片描述
至此，font-size结束了。

行高

顶线向上延申的空间，和底线向下延申的空间，两个空间相等，该空间叫做line-gap（空隙）
如图所示：

在这里插入图片描述

line-gap默认情况下，是字体设计者决定，大多数line–gap是正值，但也有0和负值。

top到bottom（看ppt图），叫做virtual-area（虚拟区）。

行高，就是virtual-area：

实际开发中，我们通过设置行高，间接的设置了line-gap的值。

line-height:normal，默认值，使用文字默认的line-gap（默认值是由字体设置者决定的）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    span{
    
    
        font-family: consolas;
        font-size: 200px;
        background-color: lightblue
    }
    p{
    
    
        background-color: red;
    }
</style>
</head>
<body>
   <p>
    <span>
        M
    </span>
   </p>
</body>
</html>

在这里插入图片描述
上图中span背景色刚好遮住红色，说明line-gap为0。

接下来我们改变字体为Arial
在这里插入图片描述
我们发现span背景色之间出现了间隙，但我们是没有设置行高的。这时用的是默认行高，及Arial这个字体是有line-gap的。（实际上Arial字体的line-gap为67）。

我们手动将Consolas字体的行高设置为1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    span{
    
    
        font-family: consolas;
        font-size: 200px;
        background-color: lightblue;
        line-height: 1;
    }
    p{
    
    
        background-color: red;
    }
</style>
</head>
<body>
   <p>
    <span>
        M
    </span>
   </p>
</body>
</html>