PT與PX區(qū)別

字體大小的設置單位,常用的有2種:px、pt。這兩個有什么區(qū)別呢?

先搞清基本概念:px就是表示pixel,像素,是屏幕上顯示數(shù)據(jù)的最基本的點;

pt就是point,是印刷行業(yè)常用單位,等于1/72英寸。

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

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

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

分清“屏幕效果”和“打印效果”:

在瀏覽網(wǎng)頁過程中,所有的“大”“小”概念,都是基于“屏幕”這個“界面”上。“屏幕”上的各種信息,包括文字、圖片、表格等等,都會隨屏幕的分辨率變化而變化,一個100px寬度大小的圖片,在800×600分辨率下,要占屏幕寬度的1/8,但在1024×768下,則只占約1/10。所以如果在定義字體大小時,使用px作為單位,那一旦用戶改變顯示器分辨率從800到1024,用戶實際看到的文字就要變“小”(自然長度單位),甚至會看不清,影響瀏覽。

那是不是用pt做單位就沒這樣的問題呢?錯!問題同樣出現(xiàn)。剛才的例子已經(jīng)很清楚的說明,在不同分辨率下,無論是px還是pt,都會改變大小。以現(xiàn)在的電腦屏幕情況,還沒有一種單位可以保證,在不同分辨率下,一個文字大小可以“固定不變”。因為這很難以實現(xiàn)也不是很有必要:全球電腦用戶以億來數(shù),屏幕從14寸到40寸甚至更高都有,屏幕大小不同,分辨率也不同,要保證一個字體在所有用戶面前大小一樣,實在是MISSION IMPOSSIBLE。另外,電腦有其自身的調節(jié)性。

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

我認為,這個并沒有什么原則性差異,就看自己處于什么角度思考了。

Mac機怎么情況不清楚,在Windows里,默認的顯示設置中,把文字定義為96DPI(PPI,微軟都將DPI和PPI混為一體,我們也就無須較真了)。這樣的定義,說明了:1px=1/96英寸。聯(lián)系pt的概念,1pt=1/72英寸,可以得出,在這樣的設置中,1px=0.75pt,常見的宋體9pt=12px。在顯示器分辨率不變的基礎上(比如現(xiàn)在常用的1024×768),1px大小也就固定不變,改變顯示設置,調整為144DPI,可以得出,1px=0.5pt,常見的宋體9pt=18px。原先用12px來組成的一個文字,現(xiàn)在需要18px來組成,px多了,文字就“大”了,更易閱讀了。

所以,px和pt的使用區(qū)別,只有當用戶改變默認的96DPI下才會產(chǎn)生:使用px定義文字,無論用戶怎么設置,都不會改變大?。皇褂胮t定義文字,當用戶設置超過96DPI的值,數(shù)值越大,字體就越大。

(附公式:px = pt * DPI / 72) 對了,剛才還提到改變?yōu)g覽器中文字大小的選項,也可以改變網(wǎng)頁的文字大小。但在這種情況下,使用px和pt都是無效的,因為這2個都是有實際“pixel”數(shù)值的單位,比如9pt是12px,大小固定。這里要引用新的單位:em,其實就是%。因為當網(wǎng)頁中的字體沒有給出實際的px或pt定義的話,會有一個默認值:12pt即16px,對應瀏覽器中“字體大小”中的“中等”,以這個為標準,變大或縮小。(只適用于IE,在FF中,即便定義px或pt也都可以變大變?。?/p>

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

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

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

最后整理一下所有出現(xiàn)過的單位:

px:pixel,像素,屏幕上顯示的最小單位,用于網(wǎng)頁設計,直觀方便;

pt:point,是一個標準的長度單位,1pt=1/72英寸,用于印刷業(yè),非常簡單易用;

em:即%,在CSS中,1em=100%,是一個比率,結合CSS繼承關系使用,具有靈活性。

PPI(DPI):pixel(dot)per inch,每英寸的像素(點)數(shù),是一個率,表示了“清晰度”,“精度”

PX和PT轉換的公式:

以前在文章中介紹過PX和PT的轉換規(guī)則,其實很簡單,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

字號 磅數(shù) 毫米

八號 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)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 字體大小的設置單位,常用的有2種:px、pt。這兩個有什么區(qū)別呢? 先搞清基本概念: px就是表示pixel,像素...
    貓貓寧閱讀 28,745評論 1 11
  • 剛開始做移動端web開發(fā)的同學應該都碰到過頁面適配問題,為什么我在開發(fā)手機上調試好的頁面在其他手機會有這樣或那樣的...
    留七七閱讀 19,757評論 5 80
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,090評論 1 92
  • 剛開始接觸移動頁面重構,是不是很迷惑應該按照多大的尺寸制作?320、640還是720?按照640的設計稿重構完頁面...
    老夫的天閱讀 1,510評論 1 12
  • 本文主要介紹在編寫網(wǎng)頁中可能會用到的字體單位 網(wǎng)頁中定義字體時可能會用到的字體單位:px、em、%、rem、pt、...
    家里有棵核桃樹閱讀 5,410評論 0 4

友情鏈接更多精彩內容