iconfont图标应用

1、什么是iconfont?css

咱们如今一般所指的iconfont,是用字体文件取代图片文件,来展现图标、特殊字体等元素的方法。iconfont是阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,是设计师和前端开发的便捷工具html

 

2、iconfont对于前端应用来讲有不少便捷:前端

一、自由变化大小,并且还具备更好的可维护性(由于是矢量,因此拉伸不变形);web

二、体积小;chrome

三、自由修改颜色,支持一些CSS3对文字的效果;跨域

四、能够添加一些视觉效果如:阴影、旋转、透明度;浏览器

五、兼容IE6。工具

 

iconfont应用步骤:字体

一、首先在Iconfont-阿里巴巴矢量图标库上面将你须要的图标点击购物车按钮加入“暂存架”;编码

 

 

 

二、选择完全部要用的图标后“存储为项目”,给它命名。而后在“项目图标管理”-“个人项目”中找到这个项目,能够获取在线连接,可是在线会存在跨域问题,跨域是须要作些配置,因此通常下载到本地使用。

 

 

三、下载至本地并解压后,会有这几个文件,其中三个html文件就是字体图标的三种使用方式的介绍,能够直接打开文件在浏览器中展现demo能够看到三种使用方式的差异,其中unicode的兼容性最好,支持ie6+,下面就来试试这种方式:

 

四、 新建一个项目文件和index.html,将上面有用的文件都放入font文件夹下:

      

 

 

五、 相应图标并获取字体编码,应用于页面,将图标下的编码直接复制到页面:

<i class="icon  confont">&#xe61b;</i>

<i class="icon confont">&#xe60f;</i>

 

 

 

六、 在index.html的css中声明字体,须要注意的是文件的路径:

 

 

七、 在css中定义使用iconfont的样式

 

 

八、 打开index.html,页面中就会出现字体图标了

 

 

、iconfont常见问题:

1、字体图标在safair或chrome浏览器下被加粗?

 

       以上现象是因为字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示一个像素了,致使在有背景下的图标显示感受加粗;因此在应用字体图标的时候须要对图标样式进行抗锯齿处理,CSS代码设置以下:
.iconfont{-webkit-font-smoothing: antialiased;}

2、字体图标在IE7浏览器显示中图标右侧出现小方框现象;

 

出现以上现象能够对引用字体图标的非块标签进行如下CSS定义:

display: block;

3、字体图标在pc端的chrome浏览器下出现严重的锯齿;

 

出现以上现象能够对字体图标的边缘进行模糊;(只支持webkit内核浏览器,参数数值不宜设置得很大,这会带来图标加粗的问题)
-webkit-text-stroke-width: 0.2px;

 iconfont官网地址:http://www.iconfont.cn/

相关文章
相关标签/搜索