查看一些网站代码的过程中,会发现许多的图片是不是背景图片或者<img>,而是类似于下面这样:

.iconfont{
font-family:"iconfont" !important;
font-size:30px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}

  

这就是iconfont,国内最大的阿里巴巴团队的矢量图标库官网:http://www.iconfont.cn/
使用步骤文档有说明了。
更详细的说明参见知乎这个问题下的回答:https://www.zhihu.com/question/25952487
笔者是下载实验的,成功

iconfont的更多相关文章

  1. iconfont使用,亲测

    iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...

  2. 如何使用IconFont字体图标代替网页图片?

    一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...

  3. 安卓图标IconFont使用

    一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...

  4. iconfont的蜕化操作

    很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...

  5. WPF自定义控件与样式(1)-矢量字体图标(iconfont)

    一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...

  6. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  7. 如何使用iconfont字体代替小图片?

    我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...

  8. iOS中iconfont(图标字体)的基本使用

    前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...

  9. icon-font与svg

    icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...

  10. fontcreator制作iconfont(包含两个教程)

    第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...

随机推荐

  1. PatentTips - Fair scalable reader-writer mutual exclusion

    BACKGROUND The present invention relates generally to multithreaded programming and, more specifical ...

  2. 【ACM】nyoj_14_会场安排问题_201308151955

    会场安排问题时间限制:3000 ms  |  内存限制:65535 KB 难度:4描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工作就是安 ...

  3. [bzoj1926][Sdoi2010]粟粟的书架_二分_主席树

    粟粟的书架 bzoj-1926 Sdoi-2010 题目大意:题目链接 注释:略 想法:分成两个题 前面的我们可以二分,直接二分出来检验即可. 对于R=1的,相当一个数列,我们在上面建立主席树. 然后 ...

  4. 洛谷 P3496 [POI2010]GIL-Guilds

    P3496 [POI2010]GIL-Guilds 题目描述 King Byteasar faces a serious matter. Two competing trade organisatio ...

  5. HDU 3001

    题目中说明每个城市至少要走一次,至多走2次,因此要用到三进制压缩,然后就是状态转移方程了. 这道题就处理三进制的地方麻烦一点.同时注意,在选择最小长度时,一定是要每一个点都经过至少一次的,即是状态的每 ...

  6. [Cocos2d-x v3.x]Mac OX 创建新的Cocos2d-x 3.0 项目

    文章内容来自于: http://cocos2d-x.org/wiki/How_to_Start_A_New_Cocos2D-X_Game Mac OS X 10.9 Software Requirem ...

  7. Google Code Jam在线測试题目--Alien Language

    Problem After years of study, scientists at Google Labs have discovered an alien language transmitte ...

  8. pass an instance of class to TestCase as parameter

    use testcasesource instead https://stackoverflow.com/questions/4220943/how-to-pass-dynamic-objects-i ...

  9. hdoj--5100--Chessboard(数学推理)

     Chessboard Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  10. 713C

    费用流 并没有想出来构图方法 我们设立源汇,其实我们关心的是相邻两个值的差值,如果差值小于0说明需要长高,那么向汇点连边差值,说明需要修改,如果差大于零,那么由源点连边差值,说明可以提供修改空间,再由 ...