Icon Font浅谈

这周继续在弄hybird app 的 UI框架的重构，进行到了编写换肤功能的阶段，而在作换肤以前，我想应该先弄一套框架内置的图标。css

而图标无非就是两种作法：css3

1.图片web

使用图片很正常，可是有缺陷的。app

1.众多的图标致使了增长了许多HTTP请求框架

  PS:有人会说我把它们弄成一张大图不久行了，但是这样弄了以后，你连大小都没法改变。因此确定仍是一批小图片。工具

2.放大缩小失真字体

3.同张图片若是须要不一样颜色，又得弄多一套出来。网站

2.字体编码

也就是这篇要说得Icon Font。作法就是讲你的图标作成字符，而后用css3中的@font-face去使用它。url

PS:不说怎么去作字体，由于这对于缺乏美工功底的我来讲，作起来太吃力了。

优势：

1.不失真

2.可作到0 HTTP请求

3.可随意更换颜色大小（由于它是字体嘛），甚至是渐变

缺点：

1.即便使用一个图标也要用整个字体css（我以为无伤大雅）

找另外一条路弄Icon Font

在寻找资源中，有个网站不错——IcoMoon，https://icomoon.io/#home

1. 这个网站提供20+套,合计上千个不一样风格的icon font(有免费,有收费的,可是基本上使用免费的就够用了)

2. 这个网站有一个在线工具,你可使用这个工具来编辑它提供的icon font,而且选择本身喜欢的打包下载

就说下它的使用步骤

1.点击

PS:默认会有free的Icon在下面了

2.增长一些icon库进来

而后选择你喜欢的图标，再点击Generate Font，就能够到下载页面。

3.下载配置

之因此选择那一项，是为了生成的Icon字体文件直接以base64编码放在css文件里面

4.结果

刚刚所说的css文件就是style，咱们看下里面有什么内容（被我删减了些东西）

@font-face {
    font-family: 'icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,XXXXXXXXXXXXXXXXXXXXXXXXX) format('truetype');
    font-weight: normal;
    font-style: normal;
}

PS:后面的"XXXXXXX"太长了，就不在这里显示。

这个就是对字体的定义，src的引用也变成了base64编码的字符串。

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-checkmark:before {
    content: "\e600";
}

这个定义字体样式，值得注意的是后面一段css，之因此用:before伪类来声明，其实也是为了使用时能够不用写一个空标签"&#33"，用法以下。

<span class="icon-checkmark"></span>

就可以愉快的使用Icon Font

总结：

对于mobile web应用来讲，Icon Font去实现一套应用或框架默认图标是个不错选择，而不失真是这种方式鼓舞人使用的利器。固然若是是复杂的图标（色彩多样...）就不能用了，只能用回图片。

番外：

一些工具

文件与base64字符串进行转换工具： http://www.motobit.com/util/base64-decoder-encoder.asp

查看、编辑字体： TypeTool 3或FontCreator