css字體大小的設(shè)置方法總結(jié)
css字體大小的設(shè)置方法總結(jié)
css字體大小的設(shè)置方法總結(jié)
在Web中使用什么單位來定義頁面的字體大小，至今天為止都還在激烈的爭論著，有人說PX做為單位好，有人說EMS優(yōu)點(diǎn)多，還有人在說百分比方便，以至于出現(xiàn)了CSS Font-Size: em vs. px vs. pt vs. percent這樣的PK大局。不幸的是，仍然有不同的利弊，使各種技術(shù)都不太理想，但又無法不去用。真是進(jìn)也難，退也難呀。
最近在學(xué)習(xí)em的相關(guān)知識(shí)的時(shí)候，無意之間讓我拾得一寶，就是使用rem來設(shè)置Web頁面的字體大小。讓我一下子就來勁了，一口氣看完并測試了一回，還真是爽歪歪的呀。師傅說好東西不能吃獨(dú)食，于我就在這里給大家吹吹這個(gè)從沒見過的REM。
在詳細(xì)介紹rem之前，我們先一起來回顧一下我們常用的兩種記量單位，也是備受爭論的兩個(gè)：
1.PX為單位
2.EM為單位
PX為單位
在Web頁面初期制作中，我們都是使用“px”來設(shè)置我們的文本，因?yàn)樗容^穩(wěn)定和精確。但是這種方法存在一個(gè)問題，當(dāng)用戶在瀏覽器中瀏覽我們制作的Web頁面時(shí)，他改變了瀏覽器的字體大小，這時(shí)會(huì)使用我們的Web頁面布局被打破。這樣對(duì)于那些關(guān)心自己網(wǎng)站可用性的用戶來說，就是一個(gè)大問題了。因此，這時(shí)就提出了使用“em”來定義Web頁面的字體。
em為單位
這種技術(shù)需要一個(gè)參考點(diǎn)，一般都是以的“font-size”為基準(zhǔn)。比如說我們使用“1em”等于“10px”來改變默認(rèn)值“1em=16px”，這樣一來，我們?cè)O(shè)置字體大小相當(dāng)于“14px”時(shí)，只需要將其值設(shè)置為“1.4em”。
CSS Code復(fù)制內(nèi)容到剪貼板 body{ font-size:62.5%;/*10÷16×100%=62.5%*/ } h1{ font-size:2.4em;/*2.4em×10=24px*/ } p{ font-size:1.4em;/*1.4em×10=14px*/ } li{ font-size:1.4em;/*1.4×?=14px?*/ }
為什么“l(fā)i”的“1.4em”是不是“14px”將是一個(gè)問號(hào)呢？如果你了解過“em”后，你會(huì)覺得這個(gè)問題是多問的。前面也簡單的介紹過一回，在使用“em”作單位時(shí)，一定需要知道其父元素的設(shè)置，因?yàn)椤癳m”就是一個(gè)相對(duì)值，而且是一個(gè)相對(duì)于父元素的值，其真正的計(jì)算公式是：
1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個(gè)不確定值，那么解決這樣的問題，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
Rem為單位
CSS3的出現(xiàn)，他同時(shí)引進(jìn)了一些新的單位，包括我們今天所說的rem。在W3C官網(wǎng)上是這樣描述rem的——“font size of the root element”。下面我們就一起來詳細(xì)的了解rem。
前面說了“em”是相對(duì)于其父元素來設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在我們多次使用時(shí)，就會(huì)帶來無法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而rem是相對(duì)于根元素，這樣就意味著，我們只需要在根元素確定一個(gè)參考值，在根元素中設(shè)置多大的字體，這完全可以根據(jù)您自己的需要。
我們來看一個(gè)簡單的代碼實(shí)例：
CSS Code復(fù)制內(nèi)容到剪貼板 html{font-size:62.5%;/*10÷16×100%=62.5%*/} body{font-size:1.4rem;/*1.4×10px=14px*/} h1{font-size:2.4rem;/*2.4×10px=24px*/}
我在根元素中定義了一個(gè)基本字體大小為62.5%（也就是10px。設(shè)置這個(gè)值主要方便計(jì)算，如果沒有設(shè)置，將是以“16px”為基準(zhǔn)）。從上面的計(jì)算結(jié)果，我們使用“rem”就像使用“px”一樣的方便，而且同時(shí)解決了“px”和“em”兩者不同之處。
瀏覽器的兼容性
rem是CSS3新引進(jìn)來的一個(gè)度量單位，大家心里肯定會(huì)覺得心灰意冷呀，擔(dān)心瀏覽器的支持情況。其實(shí)大家不用害怕，你可能會(huì)驚訝，支持的瀏覽器還是蠻多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可憐的IE6-8無法，你們就把他們當(dāng)透明了吧，我向來都是如此。
不過使用單位設(shè)置字體，可不能完全不考慮IE了，如果你想使用這個(gè)REM，但也想兼容IE下的效果，可你可考慮“px”和“rem”一起使用，用"px"來實(shí)現(xiàn)IE6-8下的效果，然后使用“Rem”來實(shí)現(xiàn)代瀏覽器的效果。就讓IE6-8不能隨文字的改變而改變吧，誰讓這個(gè)Ie6-8這么二呢？哈。。。。大家不仿試試，還蠻有意思，說不定這個(gè)就是主流的度量單位了。
總結(jié)
一、PX特點(diǎn)
1. IE無法調(diào)整那些使用px作為單位的字體大��；
2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em或rem作為字體單位；
3. Firefox能夠調(diào)整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
px像素（Pixel）。相對(duì)長度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。(引自CSS2.0手冊(cè))
em是相對(duì)長度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。(引自CSS2.0手冊(cè))
任意瀏覽器的默認(rèn)字體高都是16px。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。
二、EM特點(diǎn)
1. em的值并不是固定的；
2. em會(huì)繼承父級(jí)元素的字體大小。
所以我們?cè)趯慍SS的時(shí)候，需要注意兩點(diǎn)：
1. body選擇器中聲明Font-size=62.5%；
2. 將你的原來的px數(shù)值除以10，然后換上em作為單位；
3. 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明p的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。
三、rem特點(diǎn)
rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器，應(yīng)對(duì)方法也很簡單，就是多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。
【css字體大小的設(shè)置方法總結(jié)】相關(guān)文章：
css的調(diào)試方法與經(jīng)驗(yàn)總結(jié)03-20
預(yù)防近視的方法總結(jié)08-02
腦癱治療的最佳方法總結(jié)03-20
關(guān)于小升初復(fù)習(xí)方法總結(jié)02-24
教《學(xué)弈》的方法總結(jié)（精選11篇）04-10
最流行的平面設(shè)計(jì)方法總結(jié)11-22
細(xì)胞結(jié)構(gòu)和功能的實(shí)驗(yàn)研究方法總結(jié)07-19
景天科多肉植物養(yǎng)護(hù)的方法總結(jié)03-20
口頭報(bào)告方法11-30
教案制作方法01-31