CSS樣式中字體大小

本文格式為Word版，下載可任意編輯——CSS樣式中字體大小CSS樣式中字體大小，建議font-size使用em

在如今這個提倡可用性設計以及用戶體驗設計的網絡時代，CSS也是要一同參與其中的。大部分人在CSS代碼編寫中總是先對整體定義字體尺寸，中文狀況下一般為12px，而其實這樣以來在通過IE頂部菜單中的“觀測-文字大小〞設置已無任何作用。對字體感覺太小的瀏覽者而言無疑是種很不好的用戶體驗過程。其實這一切都可以避免，那就是使用em單位作為字體顯示單位。

瀏覽器的默認字體高都是16px，所以未經調整的瀏覽器在顯示1em=16px。換算過來的話也就是說1px=0.0625em，也就是12px=0.75em,10px=0.625em，通過1px=0.0625em大家可以在CSS編寫時通過px轉換成em。不過還有一種更便利的方法，繼續(xù)往下看！

這種方法要用到%單位（僅1次），其實%和em簡單的話可以理解成前者只是比后者多2個0。為了簡化font-size的換算，大家可以在css中的body中先全局聲明font-size=62.5%，這里的%的算法和em一樣，100%=16px，1px=6.25%，10px=62.5%，也就是定義了默認字體大小為10px。好多初學者可能會在此定義0.625em或者直接定義12px，這是沒有效果的，一定要定義font-size=62.5%！由于em具有會繼承父級出血元素的字體大小的特點，這是的1em=10px，所以12px=1.2em。px與em的轉換通過除以10就可以得來，很便利了吧！

此外有一點必需要注意，可能是IE處理漢字時，對于浮點的取值確切度有限，在body下62.5%出來的12px字體比直接定義的要大一點點，只要將62.5%換成63%就可以了。通過以上對CSS代碼的調整，你會發(fā)現(xiàn)自己的網站又向用戶體驗設計更靠近了一步，在如今這個提倡可用性設計以及用戶體驗設計的網絡時代這是很重要的。

Html代碼

1.2.

3.4.

5.

6.

7.8.

9.腳本之家測試10.

11.12.

13.body{14.

15.font-size:63%;16.17.}18.

19.20.

21.22.

23.24.

25.font-size:1.2em腳本之家(可以調整)

26.

27.font-size:12px腳本之家(不能調整)

28.

29.你可以通過IE頂部菜單中的“查看-文字大小“來調整字體顯示尺寸

30.

31.32.

33.

CSS中定義的長度單位有兩種，相對長度和絕對長度。相對長度單位主要有：

*em(em，元素的字體的高度)

*ex(x-height，字母\的高度)*px(像素，相對于屏幕的分辯率)絕對長度單位主要有：

*in(英寸，1英寸=2.54厘米)*cm(厘米，1厘米=10毫米)

*mm(米)

*pt(點，1點=1/72英寸)*pc(帕，1帕=12點)

使用px和em主要優(yōu)缺點如下：

1.IE無法調整那些使用px作為單位的字體大小，而firefox能夠調整使用px和em作為單位的字體；

2.任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符

合：1em=16px。那么12px=0.75em,10px=0.625em。為了簡化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有如下特點：

1.em的值并不是固定的；

2.em會繼續(xù)父級元素的字體大小。

所以我們在寫CSS的時候，需要重視兩點：1.body選擇器中聲明Font-size=62.5%；

2.將你的原來的px數(shù)值除以10，然后換上em作為單位；

3.重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復聲明。

也就是避免1.2*1.2=1.44的現(xiàn)象。譬如說你在id為#content的div中聲明白字體大小為1.2em，那么在聲明div中的p標簽的字體大小時就只能是1em，而不是1.2em,由于此em非彼em，它因繼續(xù)#content的字體高而變?yōu)榱?/p>

1em=12px。那么我們假設要設置p的字體為22px,這個時候就需要22除以12來得到em的值了,這就是em會繼續(xù)父級元素的字體大小的特性.

但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接