慕课网 用字体在网页中画ICON图标 学习笔记

一、用 CSS Sprite 实现 icon 图标

• CSS Sprite也称为 ”CSS雪碧“ 或 ”CSS精灵“。
  • 它是把网页中一些零星背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置，因此也叫 ”图片拼合“ 技术。
  • 优点是：可减少文件体积和服务器请求次数，从而提高效率。
  • 运用到：background-image，background-position，（图片右上角为0,0）。position的位置可用js来调整，鼠标事件也可用JS来调整状态。

$(function(){
    var iconH = $(".sprite").find("s").height(),// 小图标的高度
        triggerLi = $(".sprite").children("li");

    triggerLi.each(function(){
        var $this = $(this),
            $index = $this.index();

        $this.children("s").css("background-position","0 -"+ iconH * $index +"px");

        $this.hover(function(){ // 鼠标移入移出切换图片，达到图标变色的效果
            // 鼠标移入
            $this.children("s").css("background-position","-24px -"+ iconH * $index +"px");
        }, function(){ // 24为所切换图的位置
            // 鼠标移出
            $this.children("s").css("background-position","0 -"+ iconH * $index +"px");
        });
    });
});

- 或用CSS实现：

.icon i{background:url(xx.jpg) no-repeat;}
.icon-1 i{background-position:0 0;}
.icon-2 i{background-position:0 -24px;}
.icon-3 i{background-position:0 -48px;}
.icon-4 i{background-position:0 -72px;}
.icon-5 i{background-position:0 -96px;}
.icon-6 i{background-position:0 -120px;}
.icon-7 i{background-position:0 -144px;}
.icon-8 i{background-position:0 -168px;}

• 特点：
  • 相对单个小图标，它节省文件体积和服务器请求次数。
  • 一般情况下，要保存为 PNG-24 的文件格式。
  • 可设计出丰富多彩的颜色图标。
• 难点：
  • 需要预先确定每个小图标的大小。
  • 需要注意小图标与小图标之间的距离。
• CssGaga：快速生成雪碧图工具。

---

二、font + HTML 实现 icon 图标

• 使用 Icon Fonts 的好处：
  • 灵活性：轻松地改变图标的颜色或其他CSS效果。
  • 拓展性：改变图标的大小，就像改变字体大小一样容易。
  • 矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。
  • 兼容性：字体图标支持所有现代浏览器（包括IE6）。
  • 本地使用：通过添加定制字体到本地系统，可在各种不同的设计和编辑应用程序中使用它们。
• 字体图标工具 IconMoon： icomoon.io
  • 有免费的图标和免费的应用程序。（4000+免费字体图标）
  • 可构建只包含自己需要的图标。
  • 导入自己的矢量图（SVG字体），而不会被上传到服务器。
  • 方便管理图标，除了能生成字体，还可以生成SVG。
    -字体文件格式：
  • Embedded OpenTypr Fonts（EOT）：微软开发的用于嵌入网页中的字体，IE专用字体。
  • The Web Open Font Format（WOFF）：Web字体最佳格式，是一个开放的TrueType/OpenType的压缩版本。2009年被开发，如今为W3C推荐标准。
  • TrueType Fonts（TTF）：1980s，由Microsoft和Apple联合开发的一套字体标准，是Mac OS和WIN操作系统中最常见的一种字体。（ie9以上支持）
  • SVG Fonts（SVG）：用于SVG字体渲染的一种格式，它是由W3C制定的开放标准的图形格式。

ae24c379-8378-4d2a-9bc6-4e95f57964c6.png

• @font-face属性：

81c292e0-57e4-4b67-a061-e774218d26b4.png 2d09e642-cb03-4729-bbed-85425558f780.png

• 例子：
  • CSS：

@font-face{
    font-family: "imooc-icon";
    src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
     /* 超过一个字体格式时，IE会加载失败并报告404错误，因为IE会认为其他字体是查询字符串，因此只会加载eot文件 */
    src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype") /* eot后加“？”解决非标IE加载失败问题 ，其实只要加“？”即可，“？”后面的只是习惯问题 */
         ,url("../fonts/icomoon.woff") format("woff")
         ,url("../fonts/icomoon.ttf") format("truetype")
         ,url("../fonts/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
.imooc-icon{
    font-family: "imooc-icon";
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

- HTML：

 <!-- 16进制数可在下载的字体文件中的 demo.html 中看到 --> 
<ul class="layout"> <!-- HTML中 16进制 fo48 得写成  -->   <!-- 可以直接改变字体图标的颜色和大小 --> 
    <li><a href=""><i style="color: #efe0ce;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="color: #ef7073;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="color: #78ade3;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="color: #eae77f;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="color: #3c3c3c;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="font-size:30px;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="font-size:60px;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="font-size:90px;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="font-size:120px;" class="imooc-icon"></i></a></li>
    <li><a href=""><i style="font-size:148px;" class="imooc-icon"></i></a></li>
</ul>

---

三、font + CSS 实现 icon 图标

• 原理：（因为运用了伪元素，所以非标不支持）

5f1a1e35-a39b-4f31-9c6d-b9eccf8b3a38.png

• 例子：
  • CSS：

@font-face{
    font-family: "imooc-icon";
    src: url("../fonts/icomoon.eot"); /* IE9 兼容模式 */
    src: url("../fonts/icomoon.eot?#iefix") format("embedded-opentype")
         ,url("../fonts/icomoon.woff") format("woff")
         ,url("../fonts/icomoon.ttf") format("truetype")
         ,url("../fonts/icomoon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
.imooc-icon{
    font-family: "imooc-icon";
    font-style: normal;
    font-weight: normal;
    font-size: 64px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

icon-music:before{  /* 16进制要转义 */
    content: "\e605"
}
.dianying:before{
    content: "\e606";
}
.icon-pacman:before{
    content: "\e607";
}
.icon-feed:before{
    content: "\e608";
}
.icon-file:before{
    content: "\e609";
}
.icon-paste:before{
    content: "\e60a";
}
.icon-folder:before{
    content: "\e60b";
}
.icon-calculate:before{
    content: "\e60c";
}

• HTML

<ul class="layout"> <!-- 类名最好用下载的字体文件中的 demo.html 和该字体图标的16进制对应的名字 -->
    <li><a href=""><i class="imooc-icon icon-music"></i></a></li>
    <li><a href=""><i class="imooc-icon dianying"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-pacman"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-feed"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-file"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-paste"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-folder"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-calculate"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-calculate"></i></a></li>
    <li><a href=""><i class="imooc-icon icon-calculate"></i></a></li>
</ul>

---

四、网页中画Icon小图标方法比较

acc085e9-1aa3-4db2-9484-cce23cad62ab.png