HTML中字體單位px pt em之間的轉換

在實現打印功能時,遇到一個問題,使用px做爲單位在不一樣的機器或者打印機上打印出的字體大小不同,因此通過查詢,發現使用pt爲單位可以進行物流適配,下面是各單位之間的轉換:css

定義字體大小有常見三種單位,px、em、pthtml

px

px是pixel縮寫,是基於像素的單位.在瀏覽網頁過程當中,屏幕上的文字、圖片等會隨屏幕的分辨率變化而變化,一個100px寬度大小的圖片,在800×600分辨率下,要佔屏幕寬度的1/8,但在1024×768下,則只佔約1/10。因此若是在定義字體大小時,使用px做爲單位,那一旦用戶改變顯示器分辨率從800到1024,用戶實際看到的文字就要變「小」(天然長度單位),甚至會看不清,影響瀏覽。 web

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」等等,不管電腦怎麼設置,打印出來永遠就是這麼大。spa

轉換

瀏覽器的默認字體高都是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,這是沒有效果的,htm


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

 

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

參考來自:http://www.cnblogs.com/dolphinX/p/3237054.html圖片

相關文章
相關標籤/搜索