CSS如何远程加载字体的方法

网上有许多这种加载字体文件的 CSS 方法，以“微软雅黑”为例看这段代码：

html:  body {font-family:'微软雅黑'} 

css:   @font-face { 

      font-family:微软雅黑; 

           src: url('微软雅黑.eot'); /* IE9 Compat Modes */ 

          src: url('微软雅黑.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 

          url('微软雅黑.woff') format('woff'), /* Modern Browsers */ 

       url('微软雅黑.ttf')  format('truetype'), /* Safari, Android, iOS */ 

          url('微软雅黑.svg#微软雅黑') format('svg'); /* Legacy iOS */ 

         } 

1、先下载一个微软雅黑字体文件（注意：不要安装到系统中！）

2、新建一个 HTML 文件，用上面的方法把字体加载进来

    经过上面的代码，咱们知道，除了须要一个 .ttf 格式的字体文件外还须要  .eot、.woff、.svg 这三个格式的文件，而如何得到这些文件应该会是解决 IE 系列浏览器的关键！

网上基本上没有发现有这几种格式直接下载的。有的都是介绍转换的方法。有些文章告诉了一些如何生成 .eot 文件的方法，我找了其中2个方法作了测试：

1. http://www.fontsquirrel.com/fontface/generator。是个专门把 .ttf 转换为 .eot 的网站，

折腾了好久，上传转换后下载下来的.eot文件不能使用（也有多是我本身方法不对）。

2.http://ttf2eot.sebastiankippe.com/，在网站上直接选择上传文件，转换-下载。经本人测试这个可使用。

还有一个问题：

    就是咱们一般在网上找到一些漂亮的字体，但是他只有OpenType格式的，转换也不方便，通过测试，发现也能够以上面的方式加载到css中：

@font-face {

    font-family: 微软雅黑;

    src:url('微软雅黑.otf')  format('OpenType');

}

若不考虑兼容性如今最近版本的浏览器均可以支持（chrome、Firefox、Safari、IE11）IE6~IE9均不支持。

其余格式.woff 和 .svg 格式因为适用的浏览器不多能够无论。