字体font

一、字体

1.1 相关样式

color：设置字体颜色
font-size：字体大小

与font-size相关单位

em：相当于当前元素的一个font-size

rem：相当于根元素的一个font-size

font-family：字体族（字体的格式）

- 可选值：

serif：衬线字体

sans-serif：非衬线字体

monospace：等宽字体

- 指定字体的类别，浏览器会自动使用该类别下的字体（针对了硬件方面，取决于下载字体的数量）

- font-family可以同时指定多个字体；多个字体使用时，用“，”隔开

　　字体生效时优先选择第一个，第一个无法使用，则用第二个，依此类推

font-family: 'Courier New', Courier, monospace;

font-weight：字重字体的加粗

normal：默认值，不加粗

bold：加粗

100-900：九个级别（没什么用，这是根据浏览器系统本身对相对应的字体下载的字重数量来设置的）

font-style：字体的风格

normal：正常的

italic：斜体

font: [font-style] [font-weight] [font-size]/[行高(倍数)] [font-family];

注：

font中的值字体大小和字体族都是放在后两位的位置上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体font</title>
    <style>
        .content{
            width: 100%;
            height: 300px;
            background-color: rgba(53, 231, 53, 0.575);
        }
        .content p{
            /* font-size: 20px;
            font-weight: bold;
            font-style: italic;
            font-family: 'Courier New', Courier, monospace;
            
            line-height: 150px; */

            font: italic bold 20px/3 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <div class="content">
        <p>上天是公平的，你的付出和汗水，都记录在时光里，它们会变成另一种东西，陪在你的身边，放在你的心里，这种东西，叫做幸福，这种福气，叫做幸运!</p>
    </div>
</body>
</html>

1.2 @font-face

/* 
    font-face可以将服务器中的字体直接提供给用户使用 
    使用时考虑的问题：
        1.加载速度
        2.版权
        3.字体格式
*/
@font-face {
    /* 指定字体的名字 */
    font-family: 'myfont';
    /* 服务器指定字体的路径 */
    src: url('路径') format("truetype");
}

二、图标字体（iconfont）

font awesome （https://fontawesome.com/）

- 主要有两个类：fas、fab

- 写法（两种）：

① 通过类设置

② 通过实体设置

三、行高（line-height）

3.1 行高的概念

- 行高指的是文字占有的实际高度
- 行高的值：

- 指定大小（px、em）

- 设置为行高的一个整数（指字体大小的倍数）

- 行高经常还用来设置文字的行间距

3.2 字体框

- 指字体存在的格子，设置font-size实际上就是在设置字体框的高度