css基础学习笔记之字体图标

一、字体图标的运用克服了精灵图的缺点：
1.图片文件还是比较大的
2.像素图片放大或缩小会失真
3.一旦完整精灵图片制作完成后想要更换非常复杂

二、字体图标–iconfont：展示的是图片，本质是属于字体，字体图标有三个优点如下：
1.轻量级：一个图标要比一系列的图像小，一旦字体加载了，图标马上就会渲染出来，减少了服务器的请求
2.灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
3.兼容性：几乎支持所有的浏览器，请放心使用
注意：字体图标并不能替代精灵技术，只是在工作中图标部分技术的提升和优化
总结：简单的小图标用字体图标，复杂的用精灵技术

三、推荐两个免费的字体图标网站：
1. https://icomoon.io/ 这是一个外国的网站，加载会有点慢
2. https://www.iconfont.cn/ 这是国内的阿里巴巴图标库

四、介绍一下如何在https://icomoon.io/下载我们想要的图标：

1.打开网站，然后点击右侧的IconMoon App。
2.点击之后进入图标库，然后鼠标单击选择我们想要的图标。

3.如果在此页面没有找到心仪的图标，我们还可以点击页面最下方的Add Icons From Library来加载更多的图标。

4.当我们挑选完毕后，把目光移到页面最下面，这里一共有三个选项如图中文字所示：

5.点击右边的字体图标后，出现下载选项，接着把文件下载并解压到我们工作文件所处的目录下。

6.在css中用下面的句式进行导入字体图标（直接复制就行，不必硬记）

 @font-face {
            font-family: 'icomoon';
            src: url('./fonts/icomoon.eot?p4ssmb');
            src: url('./fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
                url('./fonts/icomoon.ttf?p4ssmb') format('truetype'),
                url('./fonts/icomoon.woff?p4ssmb') format('woff'),
                url('./fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }