文章出處

網頁上定義字體大小有常見三種單位,px、em、pt

px

px是pixel縮寫,是基于像素的單位.在瀏覽網頁過程中,屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化,一個100px寬度大小的圖片,在800×600分辨率下,要占屏幕寬度的1/8,但在1024×768下,則只占約1/10。所以如果在定義字體大小時,使用px作為單位,那一旦用戶改變顯示器分辨率從800到1024,用戶實際看到的文字就要變“小”(自然長度單位),甚至會看不清,影響瀏覽。 

em

em:即%,是相對單位,是一個相對長度單位,最初是指字母M的寬度,故名em。現指的是字符寬度的倍數,用法類似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。,一般用來測量長度的通用單位(例如元素周轉的頁邊空白和填充),當用于指定字體大小時,em單位是指父元素的字體大小。

在一個頁面上給定了一個父元素的字體大小,這樣就可以通過調整一個元素來成比例的改變所有元素大小.它可以自由縮放,比如用來制作可伸縮的樣式表。

pt

PT是point(磅)縮寫,是一種固定長度的度量單位,大小為1/72英寸。如果在web上使用pt做單位的文字,字體的大小在不同屏幕(同樣分辨率)下一樣,這樣可能會對排版有影響,但在Word中使用pt相當方便。因為使用Word主要目的都不是為了屏幕瀏覽,而是輸出打印。當打印到實體時,pt作為一個自然長度單位就方便實用了:比如Word中普通的文檔都用“宋體 9pt”,標題用“黑體 16pt”等等,無論電腦怎么設置,打印出來永遠就是這么大。

轉換

 
瀏覽器的默認字體高都是16px,所以未經調整的瀏覽器在顯示1em=16px,也就是說1px=0.0625em。為了簡化font-size的換算,可以在css中的body中先全局聲明font-size=62.5%也就是定義了默認字體大小為16px*0.625=10px,子元素會繼承父級元素的字體大小,于是1em=10px,所以12px=1.2em。px與em的轉換通過10就可以得來。但是定義font-size=0.625em或者直接定義12px,這是沒有效果的,


此外有一點必須要注意,IE處理漢字時,對于浮點的取值精確度有限,由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小,而是稍大一點。只要將62.5%換成63%就可以了。
 

pt和px的換算公式也比較簡單,pt=px乘以3/4。


 

文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()