iconfont 是什么：

顾名思义，IconFont 就是字体图标。严格地说，就是一种字体，但是，它们不包含字母或数字，而是包含符号和字形。您可以使用 CSS 设置样式，就像设置常规文本一样，这使得 IconFont 成为 Web 开发时图标的热门选择。

IconFont 的使用方式和 传统的 WebFont 如出一辙，又把大量的图标变成了一个字体文件，减少了请求数，而且有效减小请求体积。当一个网页有自己的图标字体库之后，可以复用在很多地方，减少很多二次开发成本。因此现代网页多会使用 IconFont 来展示图标，那么如何使用并且生成 IconFont 也就变成了前端开发人员必知必会的能力。

优缺点：

优点

• 可以方便地将任何 CSS 效果应用于它们。

• 因为它们是矢量图形，所以它们是可伸缩的。这意味着我们可以在不降低质量的情况下伸缩它们。

• 我们只需要发送一个或少量 HTTP 请求来加载它们，而不是像图片，可能需要多个 HTTP 请求。

• 由于尺寸小，它们加载速度快。

• 它们在所有浏览器中都得到支持（甚至支持到 IE6）。

缺点

• 不能用来显示复杂图像
• 通常只限于一种颜色，除非应用一些 CSS 技巧
• 字体图标通常是根据特定的网格设计的，例如 16x16, 32×32, 48×48等。如果由于某种原因将网格系统改为25×25，可能不会得到清晰的结果

IconFont 的使用原理来自于 css 的 @font-face 属性。这个属性用来定义一个新的字体，基本用法如下：

@font-face {
  font-family: <YourFontName>;
  src: <url> [<format>],[<source> [<format>]], *;
  [font-weight: <weight>];
  [font-style: <style>];
}

• font-family：为载入的字体取名字。

• src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。

• [format]定义的字体的格式，用来帮助浏览器识别。主要取值为：truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)。

• font-weight：定义加粗样式。

• font-style：定义字体样式。

• format 对应字体格式

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

.example {
  font-family: "defineName";
  content: "/e103";
}