再说iconfont和font-face

前言

简单说完css边框和背景属性，那么今天就轮到css3字体属性值了，网页最最最最最最重要的莫过于内容，但是内容的主体是文字，所以文字才是大头。

乍一看这标题就有很明显的菊(蛋)花(疼)味，假如说我要再重复一遍@font-face泼出去的水又收回来重复利用的属性的话，感觉有点索然无味，大众审美会疲劳。各位看了会嗤之以鼻，不屑一顾！当然了，简单的介绍那是必不可少，比较普及率没有这么高嘛。

iconfont和font-face到底存在什么乱七八糟的事情呢，假如你看过前端观察CSS3 icon font完全指南和小胡子哥再探@font-face及webIcon制作 就会大概的知道其实他们是相辅相成，相互依懒的关系，缺一不可吧。

好吧，调情开始。

初始font-face

每次介绍一次新属性之前，都要把其属性值先简单介绍一下，这样可以让同行加深一下印象，对于@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可以让csser们自定义网页显示字体，即使是用户本地电脑没有安装相关的字体，但是依然可以正常是显示。比如定义一个 HelveticaNeue 字体，假如你在电脑上看的的是
那说明你的电脑上没有这个Helvetica字体，假如你显示那么说明你的电脑上是有这个字体。而通过@font-face引入自定义字体，那么不管你电脑有没有Helvetica字体都会显示后面这张图片的字体。

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

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

(格式来源：http://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html)

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

4.font-variant，字体变形值

5.font-stretch，字体拉伸值

6.font-weight，字体粗线值

7.font-style，字体属性值

其实还有一个值叫做font-feature-settings这个值答题是跟字体变形 font-variant表现出来差不多一样，故这里不做介绍。当然以上的值都是可选的，你不想要显示自定义字体，完全没有必要往下看。

假如我们想要在网页显示自定义字体，那么我们的css要如下

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

（来源：http://www.qianduan.net/css3-icon-font-guide.html）

好了，font-face简单介绍就到这里，假如你还不懂，那麻烦你自己点击上面推荐的那两篇文章。

初识iconfont

就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。

还有这个iconfont后来词语，并不是一开始就出现的，网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。

所以，当我们看见阿里巴巴的iconfont的图标教程如下：

第一步：使用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#uxiconfont') format('svg'); /* iOS 4.1- */}

第二步：定义使用iconfont的样式

.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;}

第三步：挑选相应图标并获取字体编码，应用于页面

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

效果如下

更多详情，你可以轻戳：iconfont-家图标
手机党的请拿出手机↓

到这里似乎好像可以结束了，但是我们只是会知道怎么用而已，是吧，你了解他们怎么会变成这样供我们所利用的么，假如明白了，那你大可以关闭窗口继续CF或者LOL，假如你想要多了解一下，那么我们继续。

Unicode编码

iconfont依赖@font-face属性表现出来，但是font-face则需要一台可以显示字符的机器提供。两个Gary想要xxoo，他们xxoo表现出来的“爽”相当于iconfont，但是他们之间的“爽”必须依赖某种东西…咳咳咳，这时这个东西就是@font-face（演化而来的产物），但是组成这些东西的并不是我们人或者某种物体，而是分子原子元素等等最底层的东西。

所以，我们网页所显示出来的东西都是基于计算机编码所演化并根据不同的属性特质显示不同的东西。那么，问题来了，这个计算机编码具体是什么东西？

我在维基百科上面找到了相关的编码百科

Unicode（中文：万国码、国际码、统一码、单一码）是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。

它的目的就是让计算机可以更为简单呈现和处理文字，所以我们在计算机看见的都是基于Unicode编码转码的显示的一个过程。我们看见的最多的就是基本多文种平面的字符的编码为U+hhhh，其中每个h代表一个十六进制数字，与UCS-2编码完全相同。

对于什么十六进制或者是10进制等等这些计算机术语不是很了解，我们也没有必要再去深纠，我们就知道网页字符是通过计算机编码转变过来的，够了。

基本多文种平面，（Basic Multilingual Plane, BMP），或称第0平面或0号平面（Plane 0），是Unicode中的一个编码区段。编码从U+0000至U+FFFF。这个编码段是我们网页最常用的，基本上是囊过我们目前所有的字符，我们看见的每一个文字都是一个特有的编码id，比如说”“黑”字体的编码ID为：\9ED1，“软”字体编码ID为：\8F6F，所以“微软雅黑”这个字体我们有人会这么写到font-family:\5FAE\8F6F\96C5\9ED1

不信你可以轻戳右侧demo：微软雅黑编码

效果如下：

我们在看看阿里巴巴图标库中的代码也会有一个机器码，像上面的”家“图标的编码就是 &#x e663;，e663就是他的编码id。iconfont上面的每一个图标都有自己一个ID来控制，只要调用相应的值即可。工作的过程如下：

后话

因此，iconfont本质就是机器解码的结果，pc端上现在天朝应用最广泛的一个网站就是阿里系，所以我们也没有必要自己再去捣腾我们的icon规范，可以自己制作相关的图标放在阿里开源项目，然后自己调用即可。

对于移动端的应用应该是蛮适合的，这样的方式可以减少对图片的依赖并且造成更多的请求数，下次有移动页面的制作的时候不妨可以用这个办法来操作一下。

好了，11月来了，深圳依旧很热，求冷。

参考资料：
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
CSS3 icon font完全指南
再探@font-face及webIcon制作