查看一些网站代码的过程中，会发现许多的图片是不是背景图片或者<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. 联赛前集训日记Day3

    考试 竟然出了道莫比乌斯函数的应用?? 简直没法玩 刷题 莫比乌斯函数摆在面前,咋能很快改完啊 生活 GGGGGGGGGGG 自己浪过头了,开回家一周 这车翻得猝不及防,然而自己作的,自己受,只是给别 ...

  2. [cf 599D] Spongebob and Squares

    据题意: $K=\sum\limits_{i=0}^{n-1}(n-i)*(m-i)$ $K=n^2m-(n+m)\sum{i}+\sum{i^2}$ 展开化简 $m=(6k-n+n^3)/(3n^2 ...

  3. Linux下diff与patch命令的配合使用

    在Linux下,diff与patch命令配合使用可以进行简单的代码维护工作. [A] diff diff命令用于比较文件的差异,可以用于制作patch文件.但此命令参数众多.格式多样,所以在此仅介绍较 ...

  4. springMVC入门笔记

    目录 一.回顾Servlet 二.SpringMVC简介 三.搭建SpringMVC第一个案例 四.简单流程及配置 五.使用注解开发Controller 六.参数绑定 基本数据类型的获取: 如果表单域 ...

  5. apache storm 的安装

    原文: http://storm.praveendeshmane.co.in/storm/storm-0-10-0-installation-on-ubuntu-14-04.jsp --------- ...

  6. HDU 2206 IP的计算（字符串处理）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2206 Problem Description 在网络课程上,我学到了非常多有关IP的知识. IP全称叫 ...

  7. 转：分布式事务之TCC服务设计和实现注意事项

    由公司微服务培训引起的一丢丢对TCC的好奇 原文:https://yq.aliyun.com/articles/609854 一.TCC简介 TCC是一种比较成熟的分布式事务解决方案,可用于解决跨库操 ...

  8. luogu3155 [CQOI2009]叶子的染色

    题目大意 给一棵m个结点的无根树,你可以选择一个度数大于1的结点作为根,然后给一些结点(根.内部结点和叶子均可)着以黑色或白色.你的着色方案应该保证根结点到每个叶子的简单路径上都至少包含一个有色结点( ...

  9. Android Back键和Home键的区别

    back键 Android的程序无需刻意的去退出,当你一按下手机的back键的时候,系统会默认调用程序栈中最上层Activity的Destroy()方法来,销毁当前Activity.当此Activit ...

  10. Android热更新实现原理

    最近Android社区的氛围很不错嘛,连续放出一系列的android动态加载插件和热更新库,这篇文章就来介绍一下Android中实现热更新的原理. ClassLoader 我们知道Java在运行时加载 ...