@font-face

通过@font-face可以使浏览器自动应用服务器上的字体文件
涉及版权

  1. @font-face {
  2.     font-family:serif;
  3.     src: url(../fonts/serif.woff2)format("woff2"),
  4.             url(../fonts/serif.woff)format("woff");
  5. }

src一般都是自己的路径

图标字体

也用来放图标
font-awesome
icon-font

使用步骤：

font-awesome

1、将css和font文件夹放到项目目录
2、引入css

<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css"/>

3、直接使用

<span class="fa fa-id-card"></span>
<i class="fa fa-id-card"></i>

iconfont

1、挑选好图标后加入到项目
2、下载到本地
3、将除了demo文件，其他文件都放入项目
4、引入css

<link rel="stylesheet" type="text/css" href="./css/iconfont.css"/>

5、实体代码直接放入使用使用

<i class="iconfont">&#x160d;</i>

6、通过类代入

<i class="iconfont icon-ganlaji"></i>

7、通过伪类加入

li::before{
    content:'\e603';
    font-family: iconfont;
}

通过伪类使用图标字体

li::before{
    content:'\fof3';
    font-family: 'font awesome free';
}