PT與PX區(qū)別

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

先搞清基本概念:px就是表示pixel颜及,像素甩苛,是屏幕上顯示數(shù)據(jù)的最基本的點(diǎn)俏站;

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

這樣很明白墨林,px是一個點(diǎn),它不是自然界的長度單位旭等,誰能說出一個“點(diǎn)”有多長多大么?可以畫的很小衡载,也可以很大。如果點(diǎn)很小痰娱,那畫面就清晰菩收,我們稱它為“分辨率高”,反之鲸睛,就是“分辨率低”。所以官辈,“點(diǎn)”的大小是會“變”的,也稱為“相對長度”钧萍。

pt全稱為point褐缠,但中文不叫“點(diǎn)”风瘦,查金山詞霸可以看到,確切的說法是一個專用的印刷單位“磅”公般,大小為1/72英寸。所以它是一個自然界標(biāo)準(zhǔn)的長度單位官帘,也稱為“絕對長度”。

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

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

在瀏覽網(wǎng)頁過程中胖缤,所有的“大”“小”概念阀圾,都是基于“屏幕”這個“界面”上哪廓〕鹾妫“屏幕”上的各種信息涡真,包括文字肾筐、圖片哆料、表格等等吗铐,都會隨屏幕的分辨率變化而變化东亦,一個100px寬度大小的圖片抓歼,在800×600分辨率下讥此,要占屏幕寬度的1/8,但在1024×768下萄喳,則只占約1/10卒稳。所以如果在定義字體大小時他巨,使用px作為單位充坑,那一旦用戶改變顯示器分辨率從800到1024染突,用戶實(shí)際看到的文字就要變“小”(自然長度單位),甚至?xí)床磺宸萜螅绊憺g覽也榄。

那是不是用pt做單位就沒這樣的問題呢司志?錯甜紫!問題同樣出現(xiàn)。剛才的例子已經(jīng)很清楚的說明骂远,在不同分辨率下,無論是px還是pt激才,都會改變大小拓型。以現(xiàn)在的電腦屏幕情況,還沒有一種單位可以保證瘸恼,在不同分辨率下劣挫,一個文字大小可以“固定不變”钞脂。因?yàn)檫@很難以實(shí)現(xiàn)也不是很有必要:全球電腦用戶以億來數(shù)揣云,屏幕從14寸到40寸甚至更高都有冰啃,屏幕大小不同邓夕,分辨率也不同阎毅,要保證一個字體在所有用戶面前大小一樣焚刚,實(shí)在是MISSION IMPOSSIBLE扇调。另外矿咕,電腦有其自身的調(diào)節(jié)性师坎。

那在頁面設(shè)計(jì)中到底是用px還是pt呢蚀同?

我認(rèn)為革答,這個并沒有什么原則性差異,就看自己處于什么角度思考了莲镣。

Mac機(jī)怎么情況不清楚福稳,在Windows里瑞侮,默認(rèn)的顯示設(shè)置中的圆,把文字定義為96DPI(PPI,微軟都將DPI和PPI混為一體半火,我們也就無須較真了)。這樣的定義钮糖,說明了:1px=1/96英寸梅掠。聯(lián)系pt的概念藐鹤,1pt=1/72英寸瓤檐,可以得出娱节,在這樣的設(shè)置中,1px=0.75pt肄满,常見的宋體9pt=12px。在顯示器分辨率不變的基礎(chǔ)上(比如現(xiàn)在常用的1024×768)质涛,1px大小也就固定不變稠歉,改變顯示設(shè)置,調(diào)整為144DPI汇陆,可以得出,1px=0.5pt毡代,常見的宋體9pt=18px。原先用12px來組成的一個文字教寂,現(xiàn)在需要18px來組成,px多了酪耕,文字就“大”了,更易閱讀了。

所以看尼,px和pt的使用區(qū)別,只有當(dāng)用戶改變默認(rèn)的96DPI下才會產(chǎn)生:使用px定義文字藏斩,無論用戶怎么設(shè)置梳虽,都不會改變大小窜觉;使用pt定義文字,當(dāng)用戶設(shè)置超過96DPI的值禀挫,數(shù)值越大,字體就越大拓颓。

(附公式:px = pt * DPI / 72) 對了,剛才還提到改變?yōu)g覽器中文字大小的選項(xiàng)驶睦,也可以改變網(wǎng)頁的文字大小。但在這種情況下场航,使用px和pt都是無效的,因?yàn)檫@2個都是有實(shí)際“pixel”數(shù)值的單位溉痢,比如9pt是12px僻造,大小固定。這里要引用新的單位:em孩饼,其實(shí)就是%髓削。因?yàn)楫?dāng)網(wǎng)頁中的字體沒有給出實(shí)際的px或pt定義的話镀娶,會有一個默認(rèn)值:12pt即16px立膛,對應(yīng)瀏覽器中“字體大小”中的“中等”梯码,以這個為標(biāo)準(zhǔn)宝泵,變大或縮小忍些。(只適用于IE,在FF中罢坝,即便定義px或pt也都可以變大變欣铡)

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

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

但在Word或Photoshop中,使用pt就相當(dāng)方便蜈项。因?yàn)槭褂肳ord和Photoshop的主要目的都不是為了屏幕瀏覽续挟,而是輸出打印紧卒。當(dāng)打印到實(shí)體時诗祸,pt作為一個自然長度單位就方便實(shí)用了:比如Word中普通的文檔都用“宋體 9pt”跑芳,標(biāo)題用“黑體 16pt”等等直颅,無論電腦怎么設(shè)置,打印出來永遠(yuǎn)就是這么大功偿。又或者在Photoshop中,設(shè)置一個圖片中的某個藝術(shù)效果的字體是72pt大小,然后分別將這張圖片設(shè)為300DPI和72DPI共耍,再打印出來,就可以看出痹兜,這2個字體大小完全一樣,只是“清晰度”不同字旭,300DPI更清晰。這是毫無疑問的結(jié)果遗淳。

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

px:pixel,像素洲脂,屏幕上顯示的最小單位,用于網(wǎng)頁設(shè)計(jì)恐锦,直觀方便往果;

pt:point一铅,是一個標(biāo)準(zhǔn)的長度單位,1pt=1/72英寸潘飘,用于印刷業(yè),非常簡單易用卜录;

em:即%戈擒,在CSS中艰毒,1em=100%,是一個比率丑瞧,結(jié)合CSS繼承關(guān)系使用,具有靈活性绊汹。

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

PX和PT轉(zhuǎn)換的公式:

以前在文章中介紹過PX和PT的轉(zhuǎn)換規(guī)則荒叼,其實(shí)很簡單,pt=px乘以3/4被廓。

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

PX和em轉(zhuǎn)換的公式:

對于PX轉(zhuǎn)em的方法也類似嫁乘,就是em=16乘以px,也就是說1.5em=1.5×16=24px蜓斧。

設(shè)計(jì)中常用PX/EM/PT/百分比轉(zhuǎn)換表格

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)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末挎春,一起剝皮案震驚了整個濱河市看疙,隨后出現(xiàn)的幾起案子直奋,更是在濱河造成了極大的恐慌能庆,老刑警劉巖脚线,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異邮绿,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)船逮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來挖胃,“玉大人,你說我怎么就攤上這事冠骄〖哟” “怎么了凛辣?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵职烧,是天一觀的道長防泵。 經(jīng)常有香客問我,道長蝗敢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任锁右,我火速辦了婚禮,結(jié)果婚禮上讶泰,老公的妹妹穿的比我還像新娘。我一直安慰自己痪署,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布狼犯。 她就那樣靜靜地躺著,像睡著了一般悯森。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上呐馆,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機(jī)與錄音汹来,去河邊找鬼。 笑死收班,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的摔桦。 我是一名探鬼主播社付,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼邻耕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兄世?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤御滩,失蹤者是張志新(化名)和其女友劉穎党远,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沟娱,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年济似,在試婚紗的時候發(fā)現(xiàn)自己被綠了媳握。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片碱屁。...
    茶點(diǎn)故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蛾找,死狀恐怖娩脾,靈堂內(nèi)的尸體忽然破棺而出打毛,到底是詐尸還是另有隱情柿赊,我是刑警寧澤幻枉,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站熬甫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏椿肩。R本人自食惡果不足惜瞻颂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一郑象、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧厂榛,春花似錦盖矫、人聲如沸击奶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辐马。三九已至,卻和暖如春喜爷,著一層夾襖步出監(jiān)牢的瞬間萄唇,已是汗流浹背檩帐。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工另萤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留湃密,地道東北人四敞。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像达箍,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缎玫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 字體大小的設(shè)置單位解滓,常用的有2種:px赃磨、pt洼裤。這兩個有什么區(qū)別呢邻辉? 先搞清基本概念: px就是表示pixel腮鞍,像素...
    貓貓寧閱讀 27,260評論 1 11
  • 剛開始做移動端web開發(fā)的同學(xué)應(yīng)該都碰到過頁面適配問題值骇,為什么我在開發(fā)手機(jī)上調(diào)試好的頁面在其他手機(jī)會有這樣或那樣的...
    留七七閱讀 19,362評論 5 80
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案缕减? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評論 1 92
  • 剛開始接觸移動頁面重構(gòu),是不是很迷惑應(yīng)該按照多大的尺寸制作桥狡?320、640還是720裹芝?按照640的設(shè)計(jì)稿重構(gòu)完頁面...
    老夫的天閱讀 1,474評論 1 12
  • 本文主要介紹在編寫網(wǎng)頁中可能會用到的字體單位 網(wǎng)頁中定義字體時可能會用到的字體單位:px强霎、em忿项、%脆栋、rem倦卖、pt、...
    家里有棵核桃樹閱讀 4,858評論 0 4