本篇文章就web設(shè)計(jì)中“如何設(shè)定頁(yè)面文字大小”展開討論。
為什么不采用像素
現(xiàn)今大多數(shù)網(wǎng)站都是以“像素”來設(shè)置頁(yè)面文字，一般都是設(shè)置網(wǎng)頁(yè)中<body>元素為基準(zhǔn)大小，這個(gè)大小一般為12px。我之前也是這樣做的。
這個(gè)設(shè)計(jì)的優(yōu)點(diǎn)是不論用戶用哪個(gè)瀏覽器或者設(shè)備查看網(wǎng)頁(yè)，文字都會(huì)顯示一樣的大小，這種統(tǒng)一的、能事先確定大小的像素單位正是設(shè)計(jì)師們所樂意采用的。因?yàn)樗芊奖恪?/p>
可是也是會(huì)出現(xiàn)一些問題：
web瀏覽器通常會(huì)給用戶提供一些方法，讓他們可以隨意改變頁(yè)面上文字的大小，以取代設(shè)計(jì)師原本的設(shè)定。這是個(gè)很好的功能，對(duì)于那些視力較差的用戶尤為實(shí)用！這些用戶可以通過一些相應(yīng)的菜單來改變網(wǎng)頁(yè)中字體的大小。
問題來了，當(dāng)以像素為單位設(shè)定了文字的大小之后，windows平臺(tái)上的internet explorer用戶再無法隨意地改變這個(gè)大小了。因此，使用像素雖然可以讓設(shè)計(jì)師非常精確地控制尺寸，但同時(shí)也會(huì)妨礙ie/win用戶按照自己的意愿調(diào)整文字大小。這一點(diǎn)是很糟糕的。
所以以后設(shè)計(jì)網(wǎng)頁(yè)時(shí)要記住這一點(diǎn)：要允許用戶自由控制任何頁(yè)面的文字大小。
結(jié)合使用關(guān)鍵字和百分比值
關(guān)鍵字
網(wǎng)頁(yè)設(shè)計(jì)中有7個(gè)關(guān)鍵字可以使用：
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
W3C建議瀏覽器廠商將兩個(gè)相鄰關(guān)鍵字之間的比例因子設(shè)為1.5，并推薦讓這個(gè)比例保持恒定，而不管字體實(shí)際顯示為多大。
關(guān)鍵字設(shè)定的字體大小與瀏覽器當(dāng)前的設(shè)置有關(guān)。換句話說，如果用戶調(diào)整了瀏覽器的設(shè)置，使其基準(zhǔn)字體大小比默認(rèn)值更大或更小些，則該關(guān)鍵字的顯示結(jié)果就會(huì)相對(duì)于新基準(zhǔn)值成比例變化。
所以，為了能夠讓用戶自由地改變頁(yè)面文字大小，關(guān)鍵字為您提供了一種簡(jiǎn)單的、易于掌握的方法。
使用關(guān)鍵字作為基準(zhǔn)值，使用百分比值來獲取不同的尺寸
對(duì)于一般瀏覽器，使用small作為基準(zhǔn)大小和使用12px差不多。也就是說，下面的兩個(gè)聲明可以看成等效的，只不過一個(gè)可以靈活的改變文字大小而已。
body{
font-size:small;
}
body{
font-size:12px;
}
設(shè)置基準(zhǔn)值
body{
font-size:small;
}
使用百分比值來獲取不同尺寸
body{
font-size:small;
}
h1{
font-size:150%;
}
因?yàn)閔1對(duì)象總是包含在body對(duì)象之中，所以能夠保證它的文字大小將是small的150%。這就是以上代碼的含義啦。
所以在以后設(shè)置網(wǎng)頁(yè)中文字時(shí)，完全可以這樣設(shè)置：
body{
font-size:small;
}
h1{
font-size:150%;
}
h2{
font-size:130%;
}
h3{
font-size:120%;
}
ul li{
font-size:100%;
}
.note{
font-size:90%;
}
思路：設(shè)定一個(gè)基準(zhǔn)關(guān)鍵字，然后對(duì)于其他對(duì)象，使用百分比值來增大或減小字體大小。于是，當(dāng)基準(zhǔn)值改變后，各個(gè)對(duì)象的字體大小也會(huì)隨之改變。
優(yōu)勢(shì)
使用這種基準(zhǔn)值+百分比值模型的一個(gè)很大優(yōu)勢(shì)是：當(dāng)想改變默認(rèn)的頁(yè)面字體大小時(shí)，只需要修改body元素中的單個(gè)聲明。其他所有字體大小被設(shè)置為百分比值的對(duì)象都受這個(gè)頂級(jí)管轄。所以當(dāng)small以為large后，其他各個(gè)對(duì)象的字體大小將會(huì)相應(yīng)地按比例發(fā)生改變。
嵌套百分比值
例如有下面一段html代碼：
<body>
<div id="container">
<h1>this is a title</h1>
<p>this is body at default base size.</p>
</div>
</body>
它的css代碼是這樣的：
body{
font-size:small;
}
#container{
font-size:95%;
}
h1{
font-size:150%;
}
這個(gè)就是嵌套百分比值的使用了。此時(shí)h1的大小不再和之前大小一樣了，因?yàn)樗耐鈱忧短琢艘粋€(gè)id為container的div層。而根據(jù)以上的css設(shè)置，此時(shí)h1的大小是之前的95%了。
優(yōu)勢(shì)：能夠更加精確地設(shè)定文字大小值。
通過em實(shí)現(xiàn)靈活的文字
em單位能夠替代關(guān)鍵字來對(duì)大小進(jìn)行設(shè)置，對(duì)于ie/win平臺(tái)，它具有與關(guān)鍵字相同的優(yōu)勢(shì)：允許用戶調(diào)整字體大小。同時(shí)，它是一個(gè)相對(duì)單位，能夠提供更高的精度和更好的控制。用它來設(shè)置頁(yè)面默認(rèn)的基準(zhǔn)大小時(shí)，那些習(xí)慣于使用像素為單位的設(shè)計(jì)師也會(huì)感覺比較熟悉。
現(xiàn)在em這個(gè)也是用的比較多的一個(gè)方法，這個(gè)東西還是非常的實(shí)用的。
在設(shè)置字體大小、行高以及元素之間的空隙時(shí)使用em的優(yōu)勢(shì)在于：調(diào)整文字大小后，這些對(duì)象的尺寸也會(huì)按比例發(fā)生改變。
Richard Rutter介紹了一個(gè)巧妙的方法來用em設(shè)置大小的基準(zhǔn)值（http://clagnut.com/blog/348/)。其中的單位與像素等價(jià)。它假定瀏覽器默認(rèn)的文字大小設(shè)置為medium，大多數(shù)情況下這個(gè)值為16px。
Richard的方法首先是將body元素中的基準(zhǔn)字體大小設(shè)置為62.5%：
body{ font-size:62.5%; }
這個(gè)神奇的百分比值實(shí)際上是將默認(rèn)的中等字體大小從16px縮小為10px，Richard解釋其中的原因是：使用10px作為基準(zhǔn)，那么以后處理的都是很方便的整數(shù)，并且在用em進(jìn)行設(shè)置的時(shí)候可以通過使用像素的方式進(jìn)行考慮。
例如，在body中將字體大小基準(zhǔn)值設(shè)置為62.5%后，1em將顯示為10px，1.2em顯示為12px，0.9em顯示為9px，1.8em顯示為18px。如果要為頁(yè)面上的不同元素指定不同的值，那么代碼看起來應(yīng)該如下所示：
body{ font-size:62.5%; } /* 基準(zhǔn)為10px */
h1{ font-size:2em; } /* 20px */
h2{ font-size:1.8em; } /* 18px */
p{ font-size:1.2em; } /* 12px */
#sidebar{ font-size:1em; } /* 10px */
要注意的一點(diǎn)便是嵌套關(guān)系，em是相對(duì)于父元素的，這點(diǎn)要牢記。
p{ font-size:1.2em; } /* 12px */
p abbr{ font-size:2em; } /* 24px */
對(duì)于上面這個(gè)代碼，由于abbr是p的子元素，所以2em是相對(duì)于p的，所以最終的顯示效果為：
12px*2=24px
rem單位
css中引入了rem單位，可以解決多層嵌套中復(fù)雜計(jì)算的問題。
em的值依賴于父元素的字體大小，但是使用rem則不必考慮上下文的嵌套，只需根據(jù)根元素指定大小。
使用rem時(shí)，不管對(duì)象位于文檔中的什么位置，問題可以確信其字體大小是相對(duì)于基準(zhǔn)（根）字體大小設(shè)定的。同時(shí)，與em類似，rem是一個(gè)相對(duì)單位，在ie/win下可以自由調(diào)整。
瀏覽器的支持：Safari 5、Chrome、Firefox 3.6+、Opera 12和IE9。對(duì)于較老的瀏覽器，Jonathan Snook創(chuàng)建了一個(gè)優(yōu)秀的解決方案：對(duì)于支持rem的瀏覽器，使用rem；對(duì)于不支持rem的瀏覽器，使用px。在他的文章“Font Sizing with rem”中，Snook使用了如下的代碼（http://snook.ca/archives/html_and_css/font-size-with-rem）：
body{
font-size:62.5%;
}
h1{
font-size:12px;
font-size:1.2rem;
}
p{
font-size:24px;
font-size:2.4rem;
}
還不支持rem的瀏覽器將采用由px設(shè)定的第一條規(guī)則，而忽略其后用rem設(shè)定的規(guī)則。而支持rem的瀏覽器將采用第二條規(guī)則，該規(guī)則會(huì)覆蓋第一條規(guī)則。
靈活的文字是網(wǎng)頁(yè)設(shè)計(jì)中的基礎(chǔ)，以后的學(xué)習(xí)都將建立在可以隨意縮放頁(yè)面文字大小的基礎(chǔ)上進(jìn)行的。
