网页自定义字体图标看这篇就够了？！

前言：

最近在制作网页的时候用到了自定义字体图标，然后在查询了相关文档以后，最终实现了想要的效果，但是本人对如何引用字体图标的代码产生了点兴趣，于是乎就有了下边的内容，目的在于帮助大家理解一下代码的具体意思，以及为什么要这么写。

---

自定义字体图标引入步骤：

 

• 下载指定的字体图标资源（下载字体图标请点击这里）

 

---

• 将字体图标资源放到项目中

---

• css中创建相应的字体图标

/* 字体 */
@font-face {
  font-family: 'wjf';
  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;
}

---

大家看了上边的步骤，肯定觉得这也太简单了，但是事情远不止这么简单，我们要理解为什么要这么做，这才是我们需要思考的！

---

字体图标资源：

我们下载的字体图标资源有好多个类型 .eot、.ttf、.woff、.svg 首先我们需要知道的一点就是 这些字体资源类型是为了浏览器兼容性而存在的，因为有的浏览器识别的 .eot的 有的只识别.ttf的 因此我们为了让各个浏览器能正确识别我们定义的字体我们只能都引用，在让浏览器挑他们可以识别的来展示。

浏览器支持的字体图标类型

 

TrueType（.ttf）

微软和苹果的操作系统支持的字体格式，这是一种基于轮廓技术的字体，它们易于处理，保证了显示与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

 

EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

 

WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

 

SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

 

---

CSS中引用字体：

 

代码格式：

@font-face {
    font-family: ;
    src:  [][, []]*;
    [font-weight: ];
    [font-style: