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

前言：

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

---

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

 

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

 

---

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

---

• 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: <webFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

---

代码示例解释：

@font-face {
  font-family: 'wjf'; /*自定义的字体名称*/
  src: url('../fonts/icomoon.eot');/* IE9 兼容模式 */
  src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
    url('../fonts/icomoon.ttf') format('truetype'),/* Modern Browsers */
    url('../fonts/icomoon.woff') format('woff'),/* Safari, Android, iOS */
    url('../fonts/icomoon.svg') format('svg');/* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

注意：

• font-family 用于指定我们引入的字体名字，方便我们在项目中使用

• src 用于指定字体存在的路径 ，可以是本地路径也可以是url地址

• format: 字体格式，用于帮助浏览器识别，truetype opentype embedded-opentype svg 等等

• weight: 字体是否粗体

• style: 字体样式

解释：

• 上边代码中 有两个src ，设置两个src的目的就是为了兼容浏览器，特别是IE，相信大家看注释也看到了。。第一个src的目的在于支持IE9浏览器下的兼容模式（IE9使用IE7-或者IE8来渲染页面），因为IE9的兼容模式比较奇葩，他对自定义字体的解析模式发生了变化，因此我们需要单独写一个src用于兼容 IE9的兼容模式。

• 第二个src存在的目的也是为了浏览器的兼容，因为src后边可以写多个url，所以我们在第二个src后边添加多个url用以让浏览器选择自己可以看懂的字体类型解析，其中大家可能发现了 ?#iefix 这个奇怪的字符也是因为 老版本的IE浏览器会因为 多个url无法解析而返回404错误，我们通过添加 一个 ? 符号来让IE浏览器将 ?后的字符当做参数来解析，这样IE就不会报错了，至于 # 的目的在于 有些 Apache服务其中缺少#会报错403,所以才加上的# 号，#号后边的字符纯粹就是注释，可以随便写！

---

总结：

我们想要在网页中引入自定义图标字体只需要下载字体资源，将资源放到项目中，在css中引入即可，重要的是我们需要明白css代码中如何引入以及每行代码的含义，争取让自己活得明明白白才行，如果不懂代码含义而直接复制粘贴代码，跟咸鱼有什么区别~~~