@font-face引入自定义字体 兼容IE

废话说在前头

最近在给学校做网站，经理要求字体必须要兼容IE，有意思的是居然没人会搞这个引入外部字体兼容！在我最无望的时候甚至还发现了百度、淘宝都向万恶的IE字体屈服了。

但最后还是CSDN爸爸救了我。

有图有真相！很多教程并没有说到点上真的耽误好多时间啊！

进入正题

首先，除IE以外的其他浏览器（Chrome、Opera、Firefox、QQ、360、搜狗）基本都可以直接使用一下两行代码引入：

@font-face{
	font-family: pingfang;
	src: url(../fonts/pingfang.ttf);
}

但这种方法在运行IE时，审查元素会看到font-family已经设置为我们引入的字体，但实际上文字的样式并没有改变。

找到的几个原因主要是：
1、IE不支持ttf格式的字体文件，需要转.eot格式的
2、OneType权限为不可安装，需要设置format属性
还有说文件名要转码为Unicode，文件要各种压缩等等。。。

其实解决办法就是格式转换加几行代码：

首先要准备好要引入的字体文件.ttf、.eot、.woff、.svg格式各一份，格式转化的工具网上一大堆；

然后在css文件中写入下列代码：

@font-face {
	font-family: pingfang;
    src: url(../fonts/pingfang.eot);
    src:local('☺'),
        url(../fonts/pingfang.eot?#iefix) format('embedded-opentype'),
        url(../fonts/pingfang.woff) format('woff'),
        url(../fonts/pingfang.ttf) format('truetype'),
        url(../fonts/pingfang.svg#webfontOTINA1xY) format('svg');
}
/*引入的文件名为 pingfang.后缀*/
/*用的时候只需要修改文件路径和文件名、字体名部分*/

这样字体就成功引入啦，只是引入哦，设置字体走一般流程就好啦~

有用的最后说

这样的方法会出现一个致命缺陷，字体文件太大，加载超慢，用户体验极差！

网页引入外部字体对我们汉字实在太不友好了，所有英文单词由26个字母组成，而我们汉字常用文字就有三千多，因此相比英文字体文件，汉字字体文件实在太大了！（我这个项目里用的苹方准简有十兆）

应用上述方法，一个十兆的ttf转码成另外三个格式，加起来有六十兆。。。

可以用字蛛压缩一下