CSS載入外部字型檔案的方法

css 遠端載入字型的方法

做**前端工程的都知道，使用者瀏覽**時，網頁上的字型是載入本地的。換言之，如果**使用了使用者電腦所沒有安裝的字型，那預期的效果就打折了。

上網蒐羅了下，這個問題，其實還是有解決辦法的。那就是，準備乙個或幾個字型檔案，放置到伺服器上，再用 css 的方法把字型載入到網頁中，這樣，即使使用者電腦中沒有某一種字型，也可以正常顯示！

以微軟雅黑為例，一般來說，vista 系統和現在的 win7 系統都自帶了這種字型，但 winxp 卻沒有。如果**中運用了雅黑字型，win7 系統的使用者訪問能夠正常顯示，但 winxp 系統的使用者訪問，就不能顯示，應該是用預設的宋體代替了。

網上有許多這種載入字型檔案的 css 方法，看這段**：

body

@font-face

就用公司辦公電腦做測試吧！系統是 winxp，我確定電腦中沒有安裝雅黑字型。

回頭看看上面的**，我們會知道，除了需要乙個 .ttf 格式的字型檔案外，還需要 .eot、.woff、.svg 這三個格式的檔案，而如何獲得這些檔案應該會是解決 ie 系列瀏覽器的關鍵！

到現在為止，我機器上安裝的十幾款瀏覽器全部都測試通過！而這一切，僅僅是因為成功新增了乙個 eot 檔案！其他的如 .woff 和 .svg 格式就先不管它了，畢竟它們適用的瀏覽器，我們很少用到。

現在，雖然是成功解決了各主流瀏覽器載入外部字型的問題，但也只是成功了一小半，因為我們要清楚地看到問題的本質，即後續需要測試**載入速度的問題，兩個字型檔案加起來快有 30m 了，載入速度的問題亟待測試與解決！