iconfont字体图标应用教程

本文由清尘发表于2016-02-10 14:32最后修改于2016-10-12属于HTML/CSS分类

iconfont对于前端应用来说有很多便捷:
1、自由变化大小
2、自由修改颜色
3、可以添加一些视觉效果如:阴影、旋转、透明度。
4、兼容IE6

一、font-face声明字体


@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

二、定义使用iconfont的样式

.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}

三、挑选相应图标并获取字体编码,应用于页面


<i class="iconfont">&#33</i>

PC端应用常见问题:

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

以上现象是由于字体图标存在半个像素的锯齿,在浏览器渲染的时候直接显示一个像素了,导致在有背景下的图标显示感觉加粗;所以在应用字体图标的时候需要对图标样式进行抗锯齿处理,CSS代码设置如下:


.iconfont{-webkit-font-smoothing: antialiased;}

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

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


display: block;

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

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

-webkit-text-stroke-width: 0.2px;

图标在线制作网站: http://www.iconfont.cn/