網頁設計CSS中文字大小的pt、px的區別

來源:互聯網
上載者:User
先搞清基本概念:px就是表示pixel,像素,是螢幕上顯示資料的最基本的點;而pt就是point,是印刷行業常用單位,等於1/72英寸。

在網頁設計css中,經常用到字型,而字型大小的設定單位,常用的有2種:px、pt。這兩個有什麼區別呢?
  先搞清基本概念:px就是表示pixel,像素,是螢幕上顯示資料的最基本的點;而pt就是point,是印刷行業常用單位,等於1/72英寸。
  這樣很明白,px是一個點,它不是自然界的長度單位,誰能說出一個“點”有多長多大嗎?可以畫的很小,也可以很大。如果點很小,那畫面就清晰,我們稱它為“解析度高”,反之,就是“解析度低”。所以,“點”的大小是會“變”的,也稱為“相對長度”。
  pt全稱為point,但中文不叫“點”,查金山詞霸可以看到,確切的說法是一個專用的印刷單位“磅”,大小為1/72英寸。所以它是一個自然界標準的長度單位,也稱為“絕對長度”。
  因此就有這樣的說法,在網頁設計中,pixel是相對大小,而point是絕對大小。
  但這種說法其實還是有問題,先來看看下面的例子:

  從上面的字型中我們能看出72px要比72pt小一些,但96px正好和72pt一樣大小 。
  讓我們來調整電腦的設定:在案頭上右鍵 > 屬性 > settings > Advanced > General > DPI setting > 96 DPI。
  試著改變設定,設為72DPI,重啟,再開啟瀏覽器看:72px已經等同於72pt了。為什嗎?
  還是再做個實驗:分別用800×600和1024×768看剛才的例子,明顯高解析度下,文字就變小。而且,關鍵的是,無論用px還是pt,都會變小。pt並沒有如有些人所說,是“絕對”的,“固定”的。
  但如果用印表機把這頁面列印出來,就可以看到:無論螢幕用什麼解析度,列印出來大小都是一樣的(這是當然的)。
  首先要分清“螢幕效果”和“列印效果”這兩個概念:
  在瀏覽網頁過程中,所有的“大”“小”概念,都是基於“螢幕”這個“介面”上。“螢幕”上的各種資訊,包括文字、圖片、表格等等,都會隨螢幕的解析度變化而變化,一個100px寬度大小的圖片,在800×600解析度下,要佔螢幕寬度的1/8,但在1024×768下,則只佔約1/10。所以如果在定義字型大小時,使用px作為單位,那一旦使用者改變顯示器解析度從800到1024,使用者實際看到的文字就要變“小”(自然長度單位),甚至會看不清,影響瀏覽。
  那是不是用pt做單位就沒這樣的問題呢?錯!問題同樣出現。剛才的例子已經很清楚的說明,在不同解析度下,無論是px還是pt,都會改變大小 。以現在的電腦螢幕情況,還沒有一種單位可以保證,在不同解析度下,一個文字大小可以“固定不變”。因為這很難以實現也不是很有必要:全球電腦使用者以億來數,螢幕從14寸到40寸甚至更高都有,螢幕大小不同,解析度也不同,要保證一個字型在所有使用者面前大小一樣,實在是MISSION IMPOSSIBLE。另外,電腦有其自身的調節性,使用者可以自己來調節:1)在瀏覽器中調節字型大小;2)在剛才提到的顯示內容裡調節。
  那在頁面設計中到底是用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或中,使用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,每英寸的像素(點)數,是一個率,表示了“清晰度”,“精度” 。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。