成都網(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 */}

但進(jìn)入到現(xiàn)代瀏覽器時(shí)代后，WOFF格式的字體受到了普遍的支持，所有，你可能只需要這樣寫(xiě)：

@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基本知識(shí)

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

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

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

如果你決定使用個(gè)性化自定義字體，可以采用一個(gè)非常靈活的方法，就是只加載盡量少的字體字符數(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幾個(gè)詞的首字母簡(jiǎn)寫(xiě)。這種字體格式專門(mén)用于網(wǎng)上，由Mozilla聯(lián) 合其它幾大組織共同開(kāi)發(fā)。WOFF字體通常比其它字體加載的要快些，因?yàn)槭褂昧薕penType (OTF)和TrueType (TTF)字體里的存儲(chǔ)結(jié)構(gòu)和壓縮算法。這種字體格式還可以加入元信息和授權(quán)信息。這種字體格式有君臨天下的趨勢(shì)，因?yàn)樗械默F(xiàn)代瀏覽器都開(kāi)始支持這種字 體格式。

SVG / SVGZ

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

EOT

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

OTF / TTF

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