CSS字体和图标字体

一字体font

字体相关的样式：
color：用来设置字体的颜色；严格意义上color设置前景色，一般都是这样设置；
font-size:设置字体的大小，和font-size相关的单位：em相当于当前元素的一个font-size；rem相当于根元素的一个font-size;
font-family：指定字体族，字体格式：
可选值：serif（衬线字体） sans-serif（非衬线字体） monospace（等宽字体），这不是指定的某一个字体，指的是字体的分类，浏览器自动决定用该类别下的字体。
可以同时指定多个字体，字体之间使用逗号隔开，第一个无法使用则使用第二个，以此类推。
font-face可以将服务器中的字体直接提供给用户使用：

 @font-face {/* 指定字体的名字 */font-family: "myfont";/* 服务器中字体的路径 */src: url("./myfont.ttf");}

这样使用也有一些问题，下载字体需要一些时间，加载速度的问题；版权的问题；

二图标字体

iconfont图标字体，在网页中经常使用一些图片，可以使用图片引用，图片会存在一些问题，图片本身比较大，非常不灵活。所以，在使用图标时，还可以将图标设置为字体，然后通过@font-face的方式引入，这样就可以通过字体的形式使用图标。
制作的方法是设计师的任务，程序员的任务是拿过来使用。
推荐国外的一个图标字体库font awesome：https://fa5.dashgame.com/#/
使用步骤：
1、下载；
2、解压；
3、将CSS和webfonts移动到项目中去，两个文件必须要同一级目录中；
4、将all.css引入到网页中；
5、使用图标字体：
直接通过类名使用；

 <!-- 类名的使用是重要的，fas类名，空格后面加图标的类名 --><!-- 如果出现乱码，将fas修改为fab,这两个是免费的，其它的是是收费的 --><i class="fas fa-skull-crossbones"></i>

通过伪元素设置图标字体
1、找到要设置的图标的元素，通过before或者after选中；
2、在content中设置字体的编码；
3、设置字体的样式；
4、通过实体设置：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./font awesome/css/all.css"><style>li{list-style:none;font-size:25px;}/* 利用伪元素设置图标字体 */.gushi li::before{content:"\f296";/* 在zeal文档中查找到fas或者fab对应的字体名字 */font-family: 'Font Awesome 5 Brands';color:orange;}</style></head>
<body><!-- 类名的使用是重要的，fas是固定写法，空格后面加图标的类名 --><!-- 如果出现乱码，将fas修改为fab,这两个是免费的，其它的是是收费的 --><ul class="gushi"><li>锄禾日当午</li><li>汗滴禾下土</li><li>谁知盘中餐</li><li>粒粒皆辛苦</li></ul><!-- 通过实体的方式设置 --><span class="fab"></span>
</body>
</html>

效果：

三阿里巴巴iconfont图标字体使用方法

网站地址：https://www.iconfont.cn/
上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="iconfont.css"><style>i.iconfont{font-size:50px;color:red;margin-left: 50px;margin-top:50px;}span::before{content:"\e610";font-family: "iconfont";font-size:50px;color:red;margin-left: 50px;margin-top:50px;}</style>
</head>
<body><!-- 使用实体名设置图标字体 --><i class="iconfont"></i><!-- 使用类名设置图标字体 --><i class="iconfont icon-qiehuan"></i><!-- 使用伪元素设置图标字体 --><span></span>
</body>
</html>

效果：