Html 字型大小單位 px em pt

2021-09-22 09:35:05 字數 1147 閱讀 9877

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

px是pixel縮寫,是基於畫素的單位.在瀏覽網頁過程中,螢幕上的文字、等會隨螢幕的解析度變化而變化,乙個100px寬度大小的,在800×600解析度下,要佔螢幕寬度的1/8,但在1024×768下,則只佔約1/10。所以如果在定義字型大小時,使用px作為單位,那一旦使用者改變顯示器解析度從800到1024,使用者實際看到的文字就要變「小」(自然長度單位),甚至會看不清,影響瀏覽。 

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

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

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。

CSS文字大小單位px em pt

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字 體,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調...

CSS文字大小單位PX EM PT

這裡引用的是jorux的 95 的中國 需要重寫css 的文章,題目有點嚇人,但是確實是現在國內網頁製作方面的一些缺陷。我一直也搞不清楚px與em之間的關係和特點,看過以後確實收穫很大。平時都是用px來定義字型,所以無法用瀏覽器字型放大的功能,而國外大多數 都可以在ie下使用。因為 1.ie無法調整...

html中px em pt區別介紹

html 不是一種程式語言,而是一種標記語言 markup language 是網頁製作所必備的。超文字 就是指頁面內可以包含 鏈結,甚至 程式等非文字元素。px em pt之間的區別 一 代表單位不同。px代表的是畫素單位,em代表的是相對單位,pt代表的是絕對單位。二 單位長度不同 pt是72分...