大家好，欢迎来到IT知识分享网。
一、什么是iconfont?
我们现在通常所指的iconfont，是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。iconfont是阿里巴巴矢量图标库是由阿里巴巴体验团队倾力打造的中国第一个最大且功能最全的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是设计师和前端开发的便捷工具。
二、iconfont对于前端应用来说有很多便捷：
1、自由变化大小，而且还具有更好的可维护性（因为是矢量，所以拉伸不变形）；
2、体积小；
3、自由修改颜色，支持一些CSS3对文字的效果；
4、可以添加一些视觉效果如：阴影、旋转、透明度；
5、兼容IE6。
三、iconfont应用步骤：
1、首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”；
2、选择完所有要用的图标后“存储为项目”，给它命名。然后在“项目图标管理”-“我的项目”中找到这个项目，可以获取在线链接，但是在线会存在跨域问题，跨域是需要做些配置，所以一般下载到本地使用。
3、下载至本地并解压后，会有这几个文件，其中三个html文件就是字体图标的三种使用方式的介绍，可以直接打开文件在浏览器中展示demo可以看到三种使用方式的差别，其中unicode的兼容性最好，支持ie6+，下面就来试试这种方式：
4、 新建一个项目文件和index.html，将上面有用的文件都放入font文件夹下：
5、 相应图标并获取字体编码，应用于页面，将图标下的编码直接复制到页面：
<i class=”icon confont”></i>
<i class=”icon confont”></i>
6、 在index.html的css中声明字体，需要注意的是文件的路径：
7、 在css中定义使用iconfont的样式
8、 打开index.html，页面中就会出现字体图标了
四、iconfont常见问题：
1、字体图标在safair或chrome浏览器下被加粗？
2、字体图标在IE7浏览器显示中图标右侧出现小方框现象；
出现以上现象可以对引用字体图标的非块标签进行以下CSS定义:
display: block;
3、字体图标在pc端的chrome浏览器下出现严重的锯齿；
iconfont官网地址：http://www.iconfont.cn/
转载于:https://www.cnblogs.com/angelatian/p/6780936.html
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/136247.html
