字体图标

字体图标主要应用于网站中通用、常用的一些小图标，它展示的是图标，但本质属于字体。

优点：

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

---

推荐下载的网站：

• icomoon 字库
• 阿里 iconfont 字库

---

1、字体图标的引入方式

1、下载完毕后，把下载包里的 fonts 文件夹放入页面根目录下 【 下载包注意要保留，追加图标的时候会用到 】

2、在 CSS 样式中全局声明字体，这样可以把字体引入到页面中。可以在下载包里面的 style.css 文件中将这段声明复制出来（注意字体文件路径）

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

3、从下载包中的 demo.html 文件中找到需要的图标，复制到 html 标签内

也可以使用左侧的 “e91b”，但要注意加转义字符 “\”。

<span>\e91b<span>

2、字体图标的追加

如果需要添加新的字体图标到原有字体文件中，我们可以把原来压缩包中的 selection.json 文件在网站上传，然后选中自己想要添加的图标，重新下载压缩包并替换原来的文件即可。

3、为什么压缩包中有那么多种字体文件？

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

1、TureType(.ttf) 格式：ttf 字体是 Windows 和 Mac 的最常见的字体，支持这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+;

2、Web Open Font Format(.woff)格式：woff 字体，支持这种字体的浏览器有1E9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

3、EmbeddedOpenType(.eot)格式：eot字体是 IE 专用字体，支持这种字体的浏览器有IE4+;

4.SVG(.svg)格式：svg字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;