PT與PX區別

標籤：

字型大小的設定單位，常用的有2種：px、pt。這兩個有什麼區別呢？

先搞清基本概念：px就是表示pixel，像素，是螢幕上顯示資料的最基本的點；

pt就是point，是印刷行業常用單位，等於1/72英寸。

這樣很明白，px是一個點，它不是自然界的長度單位，誰能說出一個“點”有多長多大嗎？可以畫的很小，也可以很大。如果點很小，那畫面就清晰，我們稱它為“解析度高”，反之，就是“解析度低”。所以，“點”的大小是會“變”的，也稱為“相對長度”。

pt全稱為point，但中文不叫“點”，查金山詞霸可以看到，確切的說法是一個專用的印刷單位“磅”，大小為1/72英寸。所以它是一個自然界標準的長度單位，也稱為“絕對長度”。

因此就有這樣的說法，pixel是相對大小，而point是絕對大小。

 

分清“螢幕效果”和“列印效果”：

在瀏覽網頁過程中，所有的“大”“小”概念，都是基於“螢幕”這個“介面”上。“螢幕”上的各種資訊，包括文字、圖片、表格等等，都會隨螢幕的解析度變化而變化，一個100px寬度大小的圖片，在800×600解析度下，要佔螢幕寬度的1/8，但在1024×768下，則只佔約1/10。所以如果在定義字型大小時，使用px作為單位，那一旦使用者改變顯示器解析度從800到1024，使用者實際看到的文字就要變“小”（自然長度單位），甚至會看不清，影響瀏覽。

那是不是用pt做單位就沒這樣的問題呢？錯！問題同樣出現。剛才的例子已經很清楚的說明，在不同解析度下，無論是px還是pt，都會改變大小。以現在的電腦螢幕情況，還沒有一種單位可以保證，在不同解析度下，一個文字大小可以“固定不變”。因為這很難以實現也不是很有必要：全球電腦使用者以億來數，螢幕從14寸到40寸甚至更高都有，螢幕大小不同，解析度也不同，要保證一個字型在所有使用者面前大小一樣，實在是MISSION IMPOSSIBLE。另外，電腦有其自身的調節性。

那在頁面設計中到底是用px還是pt呢？

我認為，這個並沒有什麼原則性差異，就看自己處於什麼角度思考了。

Mac機怎麼情況不清楚，在Windows裡，預設的顯示設定中，把文字定義為96DPI（PPI，微軟都將DPI和PPI混為一體，我們也就無須較真了）。這樣的定義，說明了：1px＝1/96英寸。聯絡pt的概念，1pt＝1/72英寸，可以得出，在這樣的設定中，1px＝0.75pt，常見的宋體9pt＝12px。在顯示器解析度不變的基礎上（比如現在常用的1024×768），1px大小也就固定不變，改變顯示設定，調整為144DPI，可以得出，1px＝0.5pt，常見的宋體9pt＝18px。原先用12px來組成的一個文字，現在需要18px來組成，px多了，文字就“大”了，更易閱讀了。

所以，px和pt的使用區別，只有當使用者改變預設的96DPI下才會產生：使用px定義文字，無論使用者怎麼設定，都不會改變大小；使用pt定義文字，當使用者佈建超過96DPI的值，數值越大，字型就越大。

　　（附公式：px = pt * DPI / 72) 對了，剛才還提到改變瀏覽器中文字大小的選項，也可以改變網頁的文字大小。但在這種情況下，使用px和pt都是無效的，因為這2個都是有實際“pixel”數值的單位，比如9pt是12px，大小固定。這裡要引用新的單位：em，其實就是％。因為當網頁中的字型沒有給出實際的px或pt定義的話，會有一個預設值：12pt即16px，對應瀏覽器中“字型大小”中的“中等”，以這個為標準，變大或縮小。（只適用於IE，在FF中，即便定義px或pt也都可以變大變小）

所以，從這個概念上看，em才是真正的“相對單位”（百分比嘛，當然是相對），而px和pt都是絕對單位（都有固定值）。

在網頁設計中，面向使用者的螢幕的基本單位是px，因此使用px作為單位是最簡單也最容易理解的，而pt也不過是通過了Windows的設定乘上了一個比率轉變成px再顯示，算是繞了個圈子。參考大部分大型網站，包括Adobe和Microsoft，都是使用px作為單位，而且在HTML中，預設的單位就是px，是不是也暗示著px是網頁設計的“內定單位”？

　　但在Word或Photoshop中，使用pt就相當方便。因為使用Word和Photoshop的主要目的都不是為了螢幕瀏覽，而是輸出列印。當列印到實體時，pt作為一個自然長度單位就方便實用了：比如Word中普通的文檔都用“宋體 9pt”，標題用“黑體 16pt”等等，無論電腦怎麼設定，列印出來永遠就是這麼大。又或者在Photoshop中，設定一個圖片中的某個美術效果的字型是72pt大小，然後分別將這張圖片設為300DPI和72DPI，再列印出來，就可以看出，這2個字型大小完全一樣，只是“清晰度”不同，300DPI更清晰。這是毫無疑問的結果。

　　最後整理一下所有出現過的單位：

　　px：pixel，像素，螢幕上顯示的最小單位，用於網頁設計，直觀方便；

　　pt：point，是一個標準的長度單位，1pt＝1/72英寸，用於印刷業，非常簡單易用；

　　em：即％，在CSS中，1em＝100％，是一個比率，結合CSS繼承關係使用，具有靈活性。

　　PPI（DPI）：pixel（dot）per inch，每英寸的像素（點）數，是一個率，表示了“清晰度”，“精度”

 

PX和PT轉換的公式：

以前在文章中介紹過PX和PT的轉換規則，其實很簡單，pt=px乘以3/4。

比如12px×3/4=9pt大小。

PX和em轉換的公式：

對於PX轉em的方法也類似，就是em=16乘以px，也就是說1.5em=1.5×16=24px。

 

設計中常用PX/EM/PT/百分比轉換表格

Pixels
 EMs
 Percent
 Points
  
 
6px
 0.375em
 37.50%
 5pt
  
 
7px
 0.438em
 43.80%
 5.5pt
  
 
8px
 0.5em
 50%
 6pt
  
 
9px
 0.563em
 56.30%
 7pt
  
 
10px
 0.625em
 62.50%
 8pt
  
 
11px
 0.688em
 68.80%
 8pt
  
 
12px
 0.75em
 75%
 9pt
  
 
13px
 0.813em
 81.30%
 10pt
  
 
14px
 0.875em
 87.50%
 11pt
  
 
15px
 0.938em
 93.80%
 11pt
  
 
 
 
16px
 1em
 100%
 12pt
 
17px
 1.063em
 106.30%
 13pt
 
18px
 1.125em
 112.50%
 14pt
 
19px
 1.188em
 118.80%
 14pt
 
20px
 1.25em
 125%
 15pt
 
21px
 1.313em
 131.30%
 16pt
 
22px
 1.375em
 137.50%
 17pt
 
23px
 1.438em
 143.80%
 17pt
 
24px
 1.5em
 150%
 18pt
  
 

 

 

 

字型大小 磅數 毫米

八號 5磅 1.84

七號 5.5磅 2.12

小六號 6.5磅 2.45

六號 7.5磅 2.81

小五號 9磅 3.15

五號 10.5磅 3.70

小四號 12磅 4.25

四號 14磅 4.93

小三號 15磅 5.23

三號 16磅 5.55

小二號 18磅 6.37

二號 22磅 7.80

小一號 24磅 8.42

一號 26磅 9.66

小初號 36磅 11.1

初號 42磅 12.7

（附公式：px = pt * DPI / 72)

PT與PX區別