矢量图标的使用

前几年已经开始流行icon font，不少项目为了节省网站空间，实现开发时灵活的图标大小和颜色等样式修改都已经采用icon font。css3里面自定义字符（@font-size）已经被各大浏览器支持，即使是古老的IE系列，可获得很好的支持。

基础使用方法

两种方法，一种是在标签上用data-属性，另一种是使用class。

首先须要在css文件中引入相关的eot、woff、ttf、svg文件：

@font-face { font-family: 'ElegantIcons'; src:url('fonts/ElegantIcons.eot'); src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'), url('fonts/ElegantIcons.woff') format('woff'), url('fonts/ElegantIcons.ttf') format('truetype'), url('fonts/ElegantIcons.svg#ElegantIcons') format('svg'); font-weight: normal; font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'ElegantIcons'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

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- */

插入一个图标：

<div class="fs1" aria-hidden="true" data-icon="&#x21;"  ></div>

上述的html标签，插入便可看到效果。可是对于须要从新经过脚本获取html标签中的data-icon值，须要使用伪元素:before：

插入html标签：

<i class="icon-group"></i>

同时须要配合样式：

.icon-group{ font-family: 'ElegantIcons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;
} i.icon-group:before{ content:'\e08b';
}

使用伪元素的好处就是编写html标签时候不须要记住繁琐没有规律的十六进制实体，而是记住icon-group这个class名便可，使得html更具语义化。

 

因为字体图标会存在半个像素的锯齿，在浏览器渲染的时候会直接显示一个像素，致使在有背景下的图标显示感受加粗；因此在应用字体图标的时候须要对图标样式进行抗锯齿处理，因此应该对CSS代码设置属性：

-webkit-font-smoothing: antialiased;