中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

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。

WOFF

WOFF是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 / 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)。

網(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)

成都網(wǎng)站建設(shè)公司
高邑县| 涞源县| 许昌市| 万全县| 寿光市| 墨玉县| 天峻县| 叶城县| 成都市| 涟水县| 乐清市| 铅山县| 万全县| 额济纳旗| 肃南| 和田市| 沙田区| 民权县| 甘谷县| 桑植县| 昌宁县| 泊头市| 黄陵县| 泾阳县| 河南省| 盐边县| 正宁县| 巧家县| 兰溪市| 盐津县| 师宗县| 安龙县| 屏山县| 巨野县| 永安市| 开平市| 青川县| 玉门市| 萍乡市| 五指山市| 盐池县|