美文网首页前端学习JS相关
《用字体在网页中画ICON图标》笔记

《用字体在网页中画ICON图标》笔记

作者: 8eeb5fce5842 | 来源:发表于2016-02-28 10:22 被阅读1275次

慕课网 用字体在网页中画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

相关文章

网友评论

    本文标题:《用字体在网页中画ICON图标》笔记

    本文链接:https://www.haomeiwen.com/subject/czawkttx.html