成都網(wǎng)站建設(shè)中自定義字體的使用方法

幾乎所有瀏覽器(包括最古老的IE6)也支持的網(wǎng)絡(luò)字體@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 */}

但進入到現(xiàn)代瀏覽器時代后，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網(wǎng)絡(luò)字體技術(shù)之前，瀏覽器顯示網(wǎng)頁上文字使用的字體只能限制在電腦里已經(jīng)安裝的幾款字體里。而且每個人的電腦里安裝的字體是因人而異的。@font-face的作用是從網(wǎng)上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。

網(wǎng)絡(luò)字體(Web font)的效率

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

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

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

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

網(wǎng)絡(luò)字體(Web font)文件格式

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

WOFF

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

SVG / SVGZ

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

EOT

Embedded Open Type。這是微軟創(chuàng)造的字體格式(是微軟在15年前發(fā)明了網(wǎng)絡(luò)字體@font-face)。這種格式只在IE6/IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因為這種格式容易被復(fù)制(非法的)，這才催生了WOFF字體格式。然而，OpenType有很多獨特的地方，受到很多設(shè)計者的喜愛。