font-face 总结

说到font-face，第一反应就会想到图标，就会想到阿里的iconfont平台，http://www.iconfont.cn/

iconfot平台有一个编辑功能特别好用，你可以在原先的图标上进行位移、放大缩小、旋转等
其实操作的步骤是：

iconfot平台有一个编辑功能特别好用，你可以在原先的图标上进行位移、放大缩小、旋转等
如果我们手里有一些图标，想转换为iconfont的话，可以直接使在线工具转换：
http://image.online-convert.c...

由于各浏览器对font-face字体格式的兼容性问题，所以有时候会需要准备多个格式的不同的字体文件

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

浏览器支持的字体格式如下所示：
IE浏览器-->EOT
Mozilla浏览器-->OTF，TTF
Safari浏览器-->OTF，TTF​​，SVG
Opera-->OTF，TTF​​，SVG
Chrome浏览器-->TTF，SVG
使用iconfont的好处如下所示：
iconfont图像放大后，不会失真：字体是矢量的，图像是基于像素的
iconfont节省流量：在图片清晰度高情况下，图片的大小就越大，iconfont颜色由css决定，尺寸要求变大的话，则适应性的变大
iconfont在颜色变幻方面很简单:如果是用图片的话，hover时如果需要变色则需要更换另外一张图片，使用iconfont则只需要更换color就可以了
使用iconfont不足之处：只能支持单色图标；

其实font-face最本质的用处是变量

使用如下代码就可以声明使用微软雅黑事实上显示的是宋体

`@font-face {
font-family: 'Microsoft Yahei';
src: local(SimSun);
}`
一般情况下我们声明一个页面上的字体会这样子写：

body {
    font-family: PingFangSC-Regular,HelveticaNeue-Light,'Helvetica Neue Light','Microsoft YaHei',sans-serif;
}

事实上我们可以利用font-face是变量的这一特性，可这如下声明：

@font-face {
  font-family: BASE;
  src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}

于是我们使用时就可以这样，这对于多处使用节省了多少代码容量

body {
    font-family: BASE;
}

有的情况下，我想让网页上某一部分字变成自己想要的字体，像如下声明就表示如果用户安装了“方正粗雅宋”就没用任何字体请求，看出local的重要性了吧

@font-face {
  font-family: FZCYS;
  src: local("FZYaSongS-B-GB"), 
       url("FZCYS.woff2"),  
       url("FZCYS.woff"),
       url("FZCYS.ttf");
}

说一下font-face中font-style的妙用吧

@font-face {
  font-family: 'I';
  font-style: normal;
  src: local('FZYaoti');
}
@font-face {
  font-family: 'I';
  font-style: italic;
  src: local('FZShuTi');
}

在使用I字体时，如果font-style声明的是normal就会使用方正姚体，如果font-style声明的是斜体的话就会使用方正舒体
font-face中的font-weight与font-style使用同理
最有趣的当属unicode-range，一般情况下我们用微软雅黑字体时，引号显示的都会很突兀

这时候unicode-range就派上用场了

@font-face {
  font-family: BASE;
  src: local("Microsoft Yahei");
}
@font-face {
  font-family: quote;
  src: local('SimSun');    
  unicode-range: U+201c, U+201d;
}
.font {
    font-family: quote, BASE;
}

使用如上代码就会变成我们想要的舒服样子

最后附上文章的参考文献：
真正了解CSS3背景下的@font face规则
[聊一聊系列]聊一聊iconfont那些事儿