iconfont
查看一些网站代码的过程中,会发现许多的图片是不是背景图片或者<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的更多相关文章
- iconfont使用,亲测
iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制 ...
- 如何使用IconFont字体图标代替网页图片?
一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜 ...
- 安卓图标IconFont使用
一.补充知识:PNG.IconFont.SVG理论 PNG为位图,是由不同的排列和染色的像素点组成的图像,位图的扩大实质是增加单个像素点的大小,故而导致在不同分辨率表现非常糟糕. SVG为可缩放矢量图 ...
- iconfont的蜕化操作
很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网 ...
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般 ...
- 图标字体(IconFont)制作
图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...
- 如何使用iconfont字体代替小图片?
我们以阿里巴巴矢量图标库举例,地址:http://www.iconfont.cn/ 在这里,你可以上传你的矢量图标,也可以直接使用现成的小图标. 为什么要用这些个图标字体,本文就不介绍了,请自行百度. ...
- iOS中iconfont(图标字体)的基本使用
前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
- icon-font与svg
icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...
- fontcreator制作iconfont(包含两个教程)
第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI ...
随机推荐
- [Usaco2010 Mar]gather 奶牛大集会
[Usaco2010 Mar]gather 奶牛大集会 题目 Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 ...
- 利用rsync如何同步单个文件
rsync -vzrtopg --progress --include-from=/home/test/include.list --exclude=/* root@192.168.30.179::b ...
- 洛谷 P2997 [USACO10NOV]旗帜Banner
P2997 [USACO10NOV]旗帜Banner 题目背景 题目大意(by:曹彦臣): 平面上有(0,0)到(n,m)的(n+1)*(m+1)个点.问有多少点对所连的线段不过其他点,且长度在[l, ...
- HTML5:控件自动获得焦点
在HTML5中,页面打开后,需要指定的控件自动获得焦点很简单,只需要一个属性就可以实现 - autofocus. 示例如下: <input type="text" auto ...
- Android studio图片ERROR: 9-patch image xx .9.png malformed
Android studio 图片错误 9-patch image error in Android ERROR: 9-patch image xx .9.png malformed 1) 异常: ...
- 2018你应该了解这些.NET面试题
2018年准备要找.NET开发相关工作的你准备好了吗,下面是小编准备的一些.NET相关的面试题,来阅读一下,也许对你有帮助哦~ 1. 谈谈你对MVC和三层架构的理解. MVC即模型.视图.控制器,模型 ...
- 在Cocos2d-X中玩转精灵
创建一个Cocos2d-Xproject,project的文件夹例如以下图所看到的: 在Resourcees目录中加入一张png格式的图片 在HelloWorldScene.cpp文件里的bool H ...
- 【Git使用具体解释】Egit使用过程中遇到的问题及解决的方法
1. Git错误non-fast-forward后的冲突解决 问题(Non-fast-forward)的出现原因在于:git仓库中已经有一部分代码,所以它不同意你直接把你的代码覆盖上去.于是你有2 ...
- broadleaf commerce到mysql和tomcat的迁移
近期刚刚接触broadleaf commerce, 一个电商站点的开源模版.详细的执行和配置能够參考链接:点击打开链接 而该模版是在jetty容器下执行的,数据库是HSQL.官方站点上给出了怎样将数据 ...
- Qt graphic item日记
今天在用用graphic view 加入graphic item的时候要引入一个context menu,自然就要对context menu上的action进行slot处理.可是graphic ite ...