|
設(shè)置網(wǎng)頁(yè)字體大小 px與em區(qū)別 收藏
誰(shuí)對(duì)我的網(wǎng)站字體大小有意見？
有人向我反映看不清我的網(wǎng)站文字的人。這使我意識(shí)到12px，其實(shí)只是讓我覺得很不錯(cuò)而已，而對(duì)于那些視力下降明顯的中年以上的人來講，幾乎等于10px對(duì)于我的感覺。 于是我告訴他，在“查看”里調(diào)整“文字大小”就可以了。但是卻發(fā)現(xiàn)這是徒勞的。在Firefox能輕易調(diào)整的字體大小，怎么在IE就變得如此”堅(jiān)不可調(diào)“？ 問題出在哪？ 我又試著打開中國(guó)的三大門戶—新浪，網(wǎng)易，搜狐。它們的字體無(wú)一例外的在IE里失去可調(diào)性?？磥磉@不是我網(wǎng)站獨(dú)有的毛病。再看看MSN，Google，A list apart，華盛頓郵報(bào)， 在IE里卻是可調(diào)的。
關(guān)鍵點(diǎn)：
1. IE無(wú)法調(diào)整那些使用px作為單位的字體大?。?br>2. 國(guó)外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位； 3. Firefox能夠調(diào)整px和em，但是96%以上的中國(guó)網(wǎng)民使用IE瀏覽器(或內(nèi)核)。這意味這中國(guó)網(wǎng)站的字體大小可以被認(rèn)為不可調(diào)。 em是何物？
em指字體高，任意瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡(jiǎn)化font-size的換算，需要在css中的body選 擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。em有如
下特點(diǎn)：
1. em的值并不是固定的； 2. em會(huì)繼承父級(jí)元素的字體大小。 重寫步驟：
1. body選擇器中聲明Font-size=62.5%； 2. 將你的原來的px數(shù)值除以10，然后換上em作為單位； 簡(jiǎn)單吧，如果只需要以上兩步就能解決問題的話，可能就沒人用px了。經(jīng)過以上兩步，你會(huì)發(fā)現(xiàn)你的網(wǎng)站字體大得出乎想象。因?yàn)閑m的值不固定，又會(huì)繼承父級(jí)元素的大小，你可 能會(huì)在content這個(gè)div里把字體大小設(shè)為1.2em, 也就是12px。然后你又把選擇器p的字體大小也設(shè)為1.2em，但如果p屬于content的子級(jí)的話，p的字體大小就不是12px，而是
1.2em=1.2 * 12px=14.4px。這是因?yàn)閏ontent的字體大小被設(shè)為1.2em，這個(gè)em值繼承其父級(jí)元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作為其子級(jí)，em則繼承
content的字體高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
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。
詭異的12px漢字(原因待查)
本人在完成em轉(zhuǎn)換時(shí)還發(fā)現(xiàn)了一個(gè)詭異的現(xiàn)象，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點(diǎn)。這個(gè)問題我已經(jīng)解決， 你只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時(shí)，對(duì)于浮點(diǎn)的取值精確度有限。
本現(xiàn)象只發(fā)生在12px的漢字，英文不存在此現(xiàn)象。 //示例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>詭異的12px漢字</title> <style type="text/css"> body { font: normal 62.5% Georgia, sans-serif; text-align:left; } .post_body{ text-align:left; font: 1.2em/1.5 'Lucida Grande', Verdana, Arial, Sans-Serif; margin:10px 32px 0 32px; padding-top:1px; } .post_body01{ text-align:left; font: 12px/1.5 'Lucida Grande', Verdana, Arial, Sans-Serif; margin:10px 32px 0 32px; padding-top:1px; } </style> <link rel="shortcut icon" href="http:///favicon.ico" /> </head> <body> <div class="post_body"> 平面設(shè)計(jì)是一個(gè)網(wǎng)頁(yè)的精髓所在，讀者直接面對(duì)的界面，在本站以后的文章中會(huì)涉及此方面內(nèi)容。也許你會(huì)認(rèn)為在腦子里形成一個(gè)網(wǎng)站的大概印象就可 以了，那么這種想法直接就給你貼上業(yè)余的標(biāo)簽。推薦工具：Photoshop；頁(yè)面切割其實(shí)可以劃分到布局里，因?yàn)槟愕捻?yè)面切割方式直接影響了布局方式，也體現(xiàn)了你是屬于表格布
局陣營(yíng)還是css布局陣營(yíng)。它是布局(前)的關(guān)鍵步驟。將在本章重點(diǎn)講述。推薦工具：Photoshop；
</div> <div class="post_body01"> 平面設(shè)計(jì)是一個(gè)網(wǎng)頁(yè)的精髓所在，讀者直接面對(duì)的界面，在本站以后的文章中會(huì)涉及此方面內(nèi)容。也許你會(huì)認(rèn)為在腦子里形成一個(gè)網(wǎng)站的大概印象就 可以了，那么這種想法直接就給你貼上業(yè)余的標(biāo)簽。推薦工具：Photoshop；頁(yè)面切割其實(shí)可以劃分到布局里，因?yàn)槟愕捻?yè)面切割方式直接影響了布局方式，也體現(xiàn)了你是屬于表格
布局陣營(yíng)還是css布局陣營(yíng)。它是布局(前)的關(guān)鍵步驟。將在本章重點(diǎn)講述。推薦工具：Photoshop；
</div> </body> </html> 本文來自CSDN博客，轉(zhuǎn)載請(qǐng)標(biāo)明出處：http://blog.csdn.net/ajaxchen_615/archive/2009/12/13/4944931.aspx
|
|
|
