查看一些网站代码的过程中，会发现许多的图片是不是背景图片或者<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. nyoj 307

    /*这是一道最短路变形题 从每个有藏宝的地方为起点 求到各个点的可以的最大重量,相当于求出了从出口 到 一个藏宝点 所  允许的最大重量,把所有藏宝点的按重量 排序(从小到大)先到最小的藏宝点带上 宝 ...

  2. debug jdk source can't watch variable what it is

    https://www.cnblogs.com/shuaiqing/p/7525841.html https://stackoverflow.com/questions/18255474/debug- ...

  3. Source Insight 与 Source Navigator ,Understand ,Crystal FLOW 源代码阅读工具

    http://www.sourceinsight.com/update.html http://www.oschina.net/p/sourcenavigator/ http://www.cnblog ...

  4. HDU 4542

    T_T终于让我过了,坑啊,竟然时限是200ms... 我是预处理出不整除了个数的,因为这个较容易一点.利用算术基本定理,f=p1^a1*p2^a2...... 所以,整除它的个数就是(a1+1)*(a ...

  5. matlab中怎样加入凝视

    1)方法一 选中你要加凝视的内容,然后选择工具菜单"text|comment"就能够了,假设要把凝视变为语句,相同选中要转变的语句,然后用鼠标选择"text|uncomm ...

  6. ios最新设置状态栏字体颜色总结

    状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View contro ...

  7. MyBatis -- 对表进行增删改查(基于注解的实现)

    1.MyBatis对数据库表进行增/删/改/查 前一篇使用基于XML的方式实现对数据库的增/删/改/查 以下我们来看怎么使用注解的方式实现对数据库表的增/删/改/查 1.1  首先须要定义映射sql的 ...

  8. Android入门之文件系统操作（二）文件操作相关指令

    (一)获取总根 File[] fileList=File.listRoots(); //返回fileList.length为1 //fileList.getAbsolutePath()为"/ ...

  9. Codeforces--615B--Longtail Hedgehog（贪心模拟）

     B. Longtail Hedgehog time limit per test 3 seconds memory limit per test 256 megabytes input stan ...

  10. C语言相关

    标准输入输出 格式化输入输出 int a,b; int arr[10]={1},*p=&b; double d; char ch,str[30]; scanf("%d%d" ...