2022-06-05 分類: 網(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格式的字體受到了普遍的支持,所有,你可能只需要這樣寫:
@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。
WOFFWOFF是Web Open Font Format幾個(gè)詞的首字母簡(jiǎ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 / SVGZScalable Vector Graphics (Font). SVG是一種用矢量圖格式改進(jìn)的字體格式,體積上比矢量圖更小,適合在手機(jī)設(shè)備上使用。只有iPhone上的Safari(4.1)之前的版本支持它。目前火狐、IE都不支持SVG字體格式?;鸷七t對(duì)SVG字體的支持,重點(diǎn)放在WOFF格式上。SVGZ是壓縮版的SVG。
EOTEmbedded Open Type。這是微軟創(chuàng)造的字體格式(是微軟在15年前發(fā)明了網(wǎng)絡(luò)字體@font-face)。這種格式只在IE6/IE8里使用。
OTF / TTFOpenType Font 和 TrueType Font。部分的因?yàn)檫@種格式容易被復(fù)制(非法的),這才催生了WOFF字體格式。然而,OpenType有很多獨(dú)特的地方,受到很多設(shè)計(jì)者的喜愛(ài)。
網(wǎng)站欄目:成都網(wǎng)站建設(shè)中自定義字體的使用方法
標(biāo)題網(wǎng)址:http://www.rwnh.cn/news20/163620.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容