Day 19 CSS <icon font 字体图标>

1. 字体图标使用场景

主要用於显示网页中通用或常用的一些小图标

因为精灵图有许多优点 但缺点也很明显:

a. 图片文件相对较大
b. 图片本身放大和缩小会失真
c. 图片制作完毕需要更换不方便

此时就出现了字体图标icon font 字体图标来解决问题

字体图标可以为前端工程师提共一种方便高效的图标使用方式

展示的是图标，本质属於字体。

2. 字体图标的优点

1. 轻量级 : 一个图标字体要比图像要小。当字体加载了图标会马上渲染出来，减少了服务器的请求。
2. 灵活性 : 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等等
3. 兼容性 : 几乎支持所有的浏览器，可以放心使用

注意 : 字体图标不能完全替代精灵图，只是对图标部分进行技术的提升和优化。

3. 如何使用字体图标

字体图标是网页常见的小图标，直接网上下载即可

使用步骤 :

a. 下载字体图标

推荐网站 :

• icomoon字库
  icomoon

b. 字体图标的引入使用(引入到html页面中)

下载完毕之後，原先的文件不要删除，後面还会使用

step 1 : 把下载包里面的fonts文件夹放入页面目录下

step 2 : 在CSS样式中全局声明字体 : 把这些字体文件通过CSS引入到我们页面中，一定要注意字体文件路径

(下载下来style.css里面会有代码 复制到CSS内)

EX :

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

step 3 : 打开demo.HTML档案 找出框框 复制到 <标签> 内

step 4 : 给<标签>指定字体 font-family: 'icomoon';

4.字体图标的追加(之後需要添加新的小图标)

原先的字体图标不够用，需要添加新的文件图标，解决方法 :

把压缩包里面的selection.json重新上传，然後选中自己想要的图标後，重新下载压缩包并替换原来的文件即可。