目录
一、效果展示
二、字体族
1、定义
浏览器和本地的字体样式，更确切地说，字体族是一类样式的字体，而并非是某单一字体。例如，好几种字体可能都属于衬线字体族
2、常见字体族
（1）serif（衬线字体）
（2）sans-serif（非衬线字体）
（3）monospace（等宽字体，多用于代码中，因为各字母占据的宽度大小会相同）
当然还有很多，zeal中有详细的解释
3、设置方式
通过font-family设置，上三类为常见样式，但每个公司要求不同，而且，会使用不止一个字体族来满足浏览器的兼容性
三、从浏览器显示非本地字体
1、如何使用
（1）使用@font-face类
（2）font-family设置为自己想要的名称
（3）src: url()中填入字体的文件地址，字体文件多为ttf类型，该类型可兼容多版本浏览器
（4）在src后可以使用format用于文件解析，但通常大可不必
（5）之后在其他类中，用font-family导入自己设置好的字体即可
2、存在的问题
（1）加载速度可能会比较慢，因为要解析文件
（2）版权，使用的字体文件在自己电脑上可用，但并不代表有宣传版权
（3）url格式可能会导致其余浏览器不支持，所以通常会不止一个链接
三、图标字体
1、使用的必要性
（1）替代图片，可以随意设置大小颜色
（2）本质是字体，是特殊的向量字体，不会导致像素失真（图片放大缩小可能会失真）
2、如何设置
（1）从awesome图标字体库（zeal文档中有解释，且不用担心版权）
-下载压缩包，注意是web压缩包
-解压缩，并且将文件目录复制粘贴到代码目录下
-使用link，连接内容css\all.css文件
-元素中加上图标的class，直接引用
（2）从阿里liconfont图标字体库（需要自己看解释，可能有版权）
-登录网站，加入库
-然后下载到对应目录
-根据html文件查看导入方法和对应编码、类等
3、三种使用方法
（1）对应类使用方法（以awesome为例）
-在元素中加入类
-以fas、fab开头，加上对应编码。例如，响铃图标类为fa-bell，则使用的实际类为fas fa-bell
-对元素进行设置即可
（2）伪类方法
-在before或者after中填入内容
-content设置为对应编码，但要注意前面加\
-设置font-family为该字体族
-在某些情况下可能要设置font-weight
例子
li::before {
/* 龙图片字体的编码 */
content: "\f6d5";
font-size: 10px;
/* 原字体族 */
font-family: "Font Awesome 6 Free";
/* 权重 */
font-weight: 900;
}（3）实体设置
-以&;为结构支撑
-先加入#x（x是小写）
-输入对应编码
四、代码
1、字体族
注意：我这里导入了本地字体，使用需要修改文件位置，注意link的文件地址
<!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>字体族</title>
<style>
/*
问题：
1.加载速度
2.版权
3.格式，可能多个浏览器不支持
*/
/* 从客户端显示想要的字体 */
@font-face {
/* 命名 */
font-family: art;
/* 链接地址 */
/* format用于解析，一般情况下可不使用 */
src: url("../src/ITCEDSCR.TTF") format("truetype");
}
p {
font-size: 40px;
color: red;
/* 衬线字体 */
/* font-family: serif; */
/* 非衬线字体 */
/* font-family:sans-serif; */
/* 等宽字体 */
font-family: art;
font-family: monospace;
}
</style>
</head>
<body>
<p>hello,how are you.i am jack.</p>
</body>
</html>
2、图标字体
注意：这里我使用了awesome图标字体，link文件位置需要自己解决
<!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>图标字体</title>
<link rel="stylesheet" href="../src/css/all.css" />
<style>
/*
图标字体作为图片的代替
此图标字体来源于awesome，也可国内阿里巴巴下载，但awesome有zeal文档可查看
操作流程：
1.下载压缩包
2.解压缩，并且将文件目录复制粘贴到代码目录下
3.使用link，连接内容
4.定义class，引用
优点：
1.防止失真
2.可以调整大小和颜色
原理：
1.通过@font-face链接引入原本的资源
2.资源全部在zip下载的文件夹里
*/
i {
color: green;
font-size: 100px;
}
/* 2.伪类方法 */
li {
list-style: none;
}
li::before {
/* 龙图片字体的编码 */
content: "\f6d5";
font-size: 10px;
/* 原字体族 */
font-family: "Font Awesome 6 Free";
/* 权重 */
font-weight: 900;
}
</style>
</head>
<body>
<!-- 1.类style方法 -->
<i class="fas fa-bell"></i>
<i class="fas fa-cat"></i>
<ul>
<li>锄禾日当午</li>
<li>汗滴禾下土</li>
<li>谁知盘中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!-- 3.实体方法 -->
<i class="fas"></i>
</body>
</html>