濟南網站建設中自定義字體的使用方法

點擊次數：更新時間：2014-06-07 14:06:33【打印】【關閉】

幾乎所有瀏覽器(包括最古老的IE6)也支持的網絡字體@font-face的用法是：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

但進入到現代瀏覽器時代后，WOFF格式的字體受到了普遍的支持，所有，你可能只需要這樣寫：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

或者只含WOFF格式：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff')； /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

然后，像這樣使用：

body {
  font-family: 'MyWebFont';
}

@font-face基本知識

在@font-face網絡字體技術之前，瀏覽器顯示網頁上文字使用的字體只能限制在電腦里已經安裝的幾款字體里。而且每個人的電腦里安裝的字體是因人而異的。@font-face的作用是從網上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統字體環境。

網絡字體(Web font)的效率

你需要注意的是，字體文件的體積可能非常的大，而且需要額外的HTTP連接，這些都會降低網站頁面的加載速度。所以，在使用網絡字體@font-face前，你需要清楚它的利與弊，判斷網絡字體是否真的有必要用在你的網站頁面上。

如果你決定使用個性化自定義字體，可以采用一個非常靈活的方法，就是只加載盡量少的字體字符數和盡量少的字體風格(粗體/斜體)。例如，如果你使用谷歌字體，你可以只加載指定的字體風格組合：

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

或者指定加載那些字符的字體。

網絡字體(Web font)文件格式

目前最主要的幾種網絡字體(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format幾個詞的首字母簡寫。這種字體格式專門用于網上，由Mozilla聯合其它幾大組織共同開發。WOFF字體通常比其它字體加載的要快些，因為使用了OpenType (OTF)和TrueType (TTF)字體里的存儲結構和壓縮算法。這種字體格式還可以加入元信息和授權信息。這種字體格式有君臨天下的趨勢，因為所有的現代瀏覽器都開始支持這種字體格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一種用矢量圖格式改進的字體格式，體積上比矢量圖更小，適合在手機設備上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字體格式。火狐推遲對SVG字體的支持，重點放在WOFF格式上。SVGZ是壓縮版的SVG。