Icon font

icon font 指的是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。

应用场景：

iconfont的优缺点

• 大小可以自由地变化
• 颜色可以自由地修改
• 添加阴影效果
• *IE6也可以支持
• 支持一些CSS3对文字的效果
• 字体文件比图片文件小很多
• 由于是字体，所以只可以显示纯色图片，不支持多种颜色的图片（缺点）

资源：

阿里icon font字库
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。

fontello
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

icomoon
可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。

Font-Awesome

去哪儿图标库

使用：

假如现在我们想使用阿里icon font字库 中的12星座图标：

步骤1: 选中12星座图标，下载到本地或者存储为在线项目

步骤2: 将以下选中的文件拷贝到项目文件目录下

步骤3: 在CSS文件中使用font-face声明字体，定义使用iconfont的样式

@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 { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing:antialiased; -webkit-text-stroke-width:0.2px; -moz-osx-font-smoothing:grayscale; }.icon-shuipingzuo:before { content:"\3437"; }
.icon-shuangyuzuo:before { content:"\3438"; }
.icon-mojiezuo:before { content:"\3439"; }
.icon-chunvzuo:before { content:"\343a"; }
.icon-shizizuo:before { content:"\343b"; }
.icon-juxiezuo:before { content:"\343c"; }
.icon-tianhezuo:before { content:"\343d"; }
.icon-sheshouzuo:before { content:"\343e"; }
.icon-tianchengzuo:before { content:"\343f"; }
.icon-shuangzizuo:before { content:"\3440"; }
.icon-jinniuzuo:before { content:"\3441"; }
.icon-muyangzuo:before { content:"\3442"; }

步骤4: 挑选相应图标并获取字体编码，应用于页面

<i class="icon iconfont">&#x343d;</i>

扩展：

关于@font-face这个属性，mozilla 的语法如下:

@font-face { [font-family:<family-name>;]? [src:[ <uri> [format(<string>#)]? | <font-face-name> ]#;]? [unicode-range:<urange>#;]? [font-variant:<font-variant>;]? [font-feature-settings:normal|<feature-tag-value>#;]? [font-stretch:<font-stretch>;]? [font-weight:<weight>]; [font-style:<style>]; }

@font-face可以让我们自定义网页显示字体，引入字体资源文件，当用户电脑里没有安装这种字体时，依然可以正常显示。

1. font-family，指定一个字体类型作为默认字体类型，比如font-family:宋体默认字体就会是宋体.

2. src，这里有3个值，分别是url引入字体路径资源，本地路径或者网络路径都可以；font-face-name：自定义字体名称；formart：字体格式，因为浏览器的N国争锋，所以导致市面上有很多的字体格式，目前主要有ttf、woft、eot、svg、svgz这几种格式类型，对应的浏览器支持如下：

   浏览器	支持类型
   IE6,7,8	仅支持 Embedded OpenType(.eot) 格式。
   IE9	除eot外，开始支持woff格式。重点内容
   Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
   Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 woff 格式。
   Chrome,Safari,Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

3. unicode-range，字体编码的范围，比如8位，16位等。

4. font-variant，字体变形值

5. font-stretch，字体拉伸值

6. font-weight，字体粗线值

7. font-style，字体属性值

   ---

over
想进一步了解字体图标制作的朋友请移步 字体图标制作详解