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

2021-07-02 13:45:08 字數 3087 閱讀 9636

在網頁設計中,經常用到字型大小的設定單位,常見的有2種:px、pt。這兩個有什麼區別呢?

原文**:

在網頁設計css中,經常用到字型,而字型大小的設定單位,常用的有2種:px、pt。這兩個有什麼區別呢?

先搞清基本概念:

px就是表示pixel,畫素,是螢幕上顯示資料的最基本的點;而pt就是point,是印刷行業常用單位,等於1/72英吋。

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

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

ps 和px  哪個更大哪個更小?

因此就有這樣的說法,在網頁設計中,pixel是相對大小,而point是絕對大小。

但這種說法其實還是有問題,先來看看下面的例子: 

文字72px

文字72pt

文字96px

從上面的字型中我們能看出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或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,每英吋的畫素(點)數,是乙個率,表示了「清晰度」,「精度」 。

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...

CSS控制網頁中文字的技巧

t color 0000ff 控制文字的樣式 控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 upper...

CSS控制網頁中文字的技巧

控制文字的樣式包括文字大小寫 文字修飾兩個部分。1.文字大小寫 文字大小寫使網頁的設計者不用在輸入文字時就完成文字的大小寫,而可以在輸入完畢後,再根據需要對區域性的文字設定大小寫。基本格式如下 text transform 引數 引數取值範圍 uppercase 所有文字大寫顯示 lowercase...