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 格式因爲適用的瀏覽器不多能夠無論。