说到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浏览器-->EOTMozilla浏览器-->OTF，TTFSafari浏览器-->OTF，TTF??，SVGOpera-->OTF，TTF??，SVGChrome浏览器-->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那些事儿
