字体图标的使用

字体图标

图片是有诸多优点的，但是缺点也很明显，比如图片不但增加了总文件的大小，也增加了很多额外的"http请求"，这些都会大大降低网页的性能的。更重要的是图片不能很好的进行”缩放“，因为图片的放大和缩小会存在失真的问题。在移动端响应式开发下，很多情况下我们是希望图标可以缩放的，所以此时，一个重要的技术便被我get到了，它就是字体图标（iconfont）。

1. 字体图标的优点

（1） 可以做和图片一样的操作，比如改变透明度、旋转度、大小等
（2） 其本质是文字，可以随意改变颜色、产生阴影、透明效果等
（3） 其体积更小，但携带的信息并未消减
（4） 几乎支持所有的浏览器

2. 字体图标的使用

字体图标使用流程如下：

（1） UI人员设计字体图标效果图（svg）
（2） 前端人员上传生成兼容性字体文件包
（3） 前端人员下载兼容字体文件包到本地
（4） 把字体文件包引入HTML页面中
一般来说，再我们自己实践中，我们使用的一些图标是大众的，我们直接从网上下载就好了

• 阿里iconfont字库
  https://www.iconfont.cn/这个是阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库，可以免费使用，能很大程度上满足我们实践的需求。
• icomoon字库
  https://icomoon.io/它允许用户选择他们所需要的图标,使它们成为一字型,内容种类繁多,非常繁多,唯一的缺点是国外的网站,打开网速较慢,但还是在可以接受的范围内.

3. 示例

1. 首先我们先去网站去https://icomoon.io上选择我们需要的图标,并下载,下载后将压缩文件解压.

2. 打开解压的文件夹,选择fonts文件夹,将其复制到当前你所建立的项目文件的根目录下.
   

3. 完成上述步骤后,我们建一个测试文件
   

4. 然后我们去到下载字体图标的网页,选着我们下载的图标,在图标的左下角,点击
   方框复制.

5. 在编辑器中,将刚刚复制的方框粘贴到span标签中,完善样式(在样式引入部分要注意字体名称和路径问题)
   

6. 以上便是字体图标的使用步骤了.这只是简单的试用一下,在实际中,对于字体图标我们还有更多的样式操作,那就是我们在实践中去慢慢积累了.