字体图标--兜兜有糖|我的兜兜有糖

目前很多页面中的图标都是使用字体图标完成的

[ 优势 ]

矢量化：字体是矢量格式，因此能够轻松的适配不同的设备，而不必为不同分辨率的屏幕准备不同的图片资源;

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化;

可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。

灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性：网页字体支持所有现代浏览器，包括IE低版。[ http://caniuse.com/#feat=fontface ]

[ 弊端 ]

图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

常用的字体图标

[阿里字体图标库] 
http://iconfont.cn/ 
先选择自己需要的图标,下载下来(SVG) 
在网站的个人中心，创建一个字体图标库，把自己刚才下载的图标都上传到图标库中，然后提交阿里审核
[Font Awesome] 
http://fontawesome.dashgame.com/
[icomoon] 
http://icomoon.io/app/
[fontello] 
http://fontello.com/
…

使用方式

@(201708)font-face{
  font-family: 'YourWebFontName';
  src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
  src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
  url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

EXAMPLE=>

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

[class^='icon_'],[class*='icon_']{
    font-family: 'SinaHomeFont';
    font-weight:normal;
    font-style:normal;

    /*解决字体图标锯齿和不清晰的情况*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/*通过伪元素before(after)加属性名content通过让编码转化为图标字体*/
.icon_logo:before{
    content:"e60e";
}

自定义字体格式

1).ttf(TrueType格式)

是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有

IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+

2).otf字体

被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+

3).woff (Web Open Font格式):

针对网页进行特殊优化，Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有 IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+

4).eot(Embedded Open Type格式)：

字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有 IE4+

5).svg(SVG格式)：

是基于SVG字体渲染的一种格式,支持这种字体的浏览器有

Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+

【网易】
@font-face {
    font-family: 'iconfont';
    src: url(http://img2.cache.netease.com/f2e/wap/common/font/iconfont_14.eot);
    src: url(http://img2.cache.netease.com/f2e/wap/common/font/iconfont_14.eot?#iefix) format('embedded-opentype'),
    url(http://img2.cache.netease.com/f2e/wap/common/font/iconfont_14.woff) format('woff'),
    url(http://img2.cache.netease.com/f2e/wap/common/font/iconfont_14.ttf) format('truetype'),
    url(http://img2.cache.netease.com/f2e/wap/common/font/iconfont_14.svg#iconfont) format('svg')
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: .2px;
    -moz-osx-font-smoothing: grayscale
}

【爱奇艺】
@font-face {
    font-family: 'iconography';
    src: url('http://static.iqiyi.com/ext/common/iconography/iconfont.eot');
    src: url('http://static.iqiyi.com/ext/common/iconography/iconfont.ttf') format('truetype'), 
    url('http://static.iqiyi.com/ext/common/iconography/iconfont.svg#iconfont') format('svg')
}

FontCreator

通过这工具可以制作新的字体图标库或者查看现有字体图标库中的信息