CSS中引入字体库，将小图标作为字体引入

首先需要先了解@font-face规则以及font-family属性

@font-face规则：新引入字体库时要用到该规则，在该规则下可定义新字体库的名称以及地址

font-family属性：定义元素的字体名称。

1.我们先下载好需要的字体库，我一般是在css文件夹根目录下再创建一个名为font文件夹，将下载好的字体库放进去

2.在CSS文件中进行@font-face规则的声明

@font-face {
    font-family: 'English';
    src: url(./fontface/Annabelle_花体英文字.ttf);
}

font-family的属性值是自定义的。
3.此时该字体库已经引入进CSS，而后在需要用到该字体样式的标签中进行定义即可。
如：

<span class="title"></span>

对应的CSS

.title {
    font-family: flowers;
}

效果如下：

将小图标作为字体引入

实际的前端开发中，会有一些小icon(例如二维码，购物车图标等)。在传统的PC端网页中，这些小icon的实现经常会用到精灵图片，通过位移来取图，以方便浏览器加载。
实际上，这些icon可以转化为字体文件，这样我们在使用时也会非常方便啦。

矢量图标下载地址推荐：[https://www.iconfont.cn/]

1.首先进入官方网站后，直接搜索自己所需的图标，将其添加到购物车

2.进入购物车，点击添加至项目，可新建一个项目文件来存储。

3.进入我的项目，将项目下载至本地

4.将下载好的文件解压后，把红框内的文件拷贝出来

5.在我们的项目下新建一个iconfont文件夹，将拷贝的内容放进去

6.打开iconfont.css文件，核对里边的路径是否正确

    <span class="buy icon-gouwucheman"></span>

.buy {
    font-family: iconfont;
}

效果如下：

这样就把购物车插入到网页中啦。