字体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实际上就是在设置字体框的高度
