zoukankan      html  css  js  c++  java
  • 字体图标的用法总结

    1:图标有哪些格式,什么是字体图标?

    • 传统图标采用图片格式,有bmp,jpg,gif,png等文件格式;字体图标采用 svg 矢量图片格式
    • 图标全部采用字体格式
    • 可以使用color,font-size...,改变图标的颜色,大小等样式

    2:字体图标实现方式分为哪几类?

    • font+html 实现字体图标(又称:Unicode引用)
    • font+css 实现字体图标
    • 使用 Symbol 方式引用(用于展示彩色图标)
    //CSS
    @font-face {
      font-family: 'iconfont';  /* project id 1164866 */
      src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot');
      src: url('//at.alicdn.com/t/font_1164866_eeece602red.eot?#iefix') format('embedded-opentype'),
      url('//at.alicdn.com/t/font_1164866_eeece602red.woff2') format('woff2'),
      url('//at.alicdn.com/t/font_1164866_eeece602red.woff') format('woff'),
      url('//at.alicdn.com/t/font_1164866_eeece602red.ttf') format('truetype'),
      url('//at.alicdn.com/t/font_1164866_eeece602red.svg#iconfont') format('svg');
    }
    
    .iconfont {
      font-family:"iconfont" !important;
      font-size: 16px;
      font-style:normal;
      /*Better Font Rendering*/
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    //第一类
    <span class="iconfont">&#xe61e;</span>
    //第二类
    <span class="iconfont icon-ic_share"><span>
    .icon-ic_share:before { content: "e61e"; }
    

    3:字体图标与传统图标的区别?
    传统图标的实现方法是利用CSS雪碧图,优点是可以减少 http 请求次数,缺点是放大图片时图片会失真,前些年比较流行;
    字体图标的实现方法是定义@font-face,优点是可以自定义图标颜色大小且图标不会失真,近些年用得比较多;
    最后介绍两个字体图标库—阿里巴巴矢量图标库,IconMoon(https://icomoon.io/app/#/select)。

  • 相关阅读:
    Vim基本功
    八个最常用的正则表达式
    程序员总结:帮助你早些明白一些道理
    HttpClient
    Red.Hat.Enterprise.Linux.6.2下安装vim 、OpenOffice、JDK、Eclipse
    输出打印某个对象所有属性及属性值
    Notepad++
    写博客?
    解决操作WordPress时提示输入FTP信息
    JS通过键盘点击事件实现div移动
  • 原文地址:https://www.cnblogs.com/sunshine21/p/11029400.html
Copyright © 2011-2022 走看看