更新時(shí)間：2014-12-21在網(wǎng)頁設(shè)計(jì)CSS中，經(jīng)常用到字體，而字體大小的設(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)的長度單位，也稱為“絕對長度”。
因此就有這樣的說法，在網(wǎng)頁設(shè)計(jì)中，pixel是相對大小，而point是絕對大小。
從上面的字體中我們能看出72px要比72pt小一些，但96px正好和72pt一樣大小 。
讓我們來調(diào)整電腦的設(shè)置：在桌面上右鍵 > 屬性 > settings > Advanced > General > DPI setting > 96 DPI。
試著改變設(shè)置，設(shè)為72DPI，重啟，再打開瀏覽器看：72px已經(jīng)等同于72pt了。為什么？
還是再做個實(shí)驗(yàn)：分別用800×600和1024×768看剛才的例子，明顯高分辨率下，文字就變小。而且，關(guān)鍵的是，無論用px還是pt，都會變小。pt并沒有如有些人所說，是“絕對”的，“固定”的。
但如果用打印機(jī)把這頁面打印出來，就可以看到：無論屏幕用什么分辨率，打印出來大小都是一樣的（這是當(dāng)然的）。66css教程站為大家免費(fèi)提供：css教程,css+div教程,div+css視頻教程
首先要分清“屏幕效果”和“打印效果”這兩個概念：
在瀏覽網(wǎng)頁過程中，所有的“大”“小”概念，都是基于“屏幕”這個“界面”上�！捌聊弧鄙系母鞣N信息，包括文字、圖片、表格等等，都會隨屏幕的分辨率變化而變化，一個100px寬度大小的圖片，在800×600分辨率下，要占屏幕寬度的1/8，但在1024×768下，則只占約1/10。所以如果在定義字體大小時(shí)，使用px作為單位，那一旦用戶改變顯示器分辨率從800到1024，用戶實(shí)際看到的文字就要變“小”（自然長度單位），甚至?xí)床磺�，影響瀏覽。
那是不是用pt做單位就沒這樣的問題呢？錯！問題同樣出現(xiàn)。剛才的例子已經(jīng)很清楚的說明，在不同分辨率下，無論是px還是pt，都會改變大小 。以現(xiàn)在的電腦屏幕情況，還沒有一種單位可以保證，在不同分辨率下，一個文字大小可以“固定不變”。因?yàn)檫@很難以實(shí)現(xiàn)也不是很有必要：全球電腦用戶以億來數(shù)，屏幕從14寸到40寸甚至更高都有，屏幕大小不同，分辨率也不同，要保證一個字體在所有用戶面前大小一樣，實(shí)在是MISSION IMPOSSIBLE。另外，電腦有其自身的調(diào)節(jié)性，用戶可以自己來調(diào)節(jié)：1）在瀏覽器中調(diào)節(jié)字體大�。�2）在剛才提到的顯示屬性里調(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í)體時(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ù)，是一個率，表示了“清晰度”，“精度” 。
