CSS調用遠程字體

CSS中的@font-face方法可以調用服務器端的字體。

Demo 可以參考： http://idv3.sinaapp.com 中標題字體的用法，具體用法如下：

@font-face { 

     font-family:name; 

     src: local('Ubuntu'), url(url) format('woff');

     sRules

}

兼容性的情況，Chrome、Firefox、Opera均沒有問題，IE系列不支持 .ttf 和 .otf。兼容IE需要 .eot 或者 .woff 的字體格式。

看了［參考資料 1］的文章，使用 font-face 有不需要本地字庫支持就能夠保持字體樣式一致，而不必使用圖片代替的優勢，缺點就是有可能會消耗加載的時間。

那么為了更好的使用font-face，我們需要做的就是提高字體的加載及響應時間。

對於字體的Format，主要有以下幾種字體：

1、TrueType（.ttf）格式。

.ttf 字體是Windows和Mac的最常見的字體，是一種RAW格式。

2、OpenType（.otf）格式。

.otf字體被認為是一種原始的字體格式，其內置在TrueType的基礎上，提供了更多的功能。

3、Web Open Font Format（.woff）格式。

.woff字體是Web字體中最佳格式，是一個TrueType的壓縮版本，同時也支持原數據包的分離。

4、Embedded Open Type（.eot）格式。

.eot字體是IE專用字體，可以從TrueType創建此格式字體。

5、SVG（.svg）格式。

.svg字體是基於SVG字體渲染的一種格式。

參考資料：

1、 CSS調用服務器端字體的利與弊

2、 Google Webfonts

3、 EOT網頁字體嵌入技術

4、 http://www.fontsquirrel.com/fontface/generator

5、 CSS的Font－face