px與pt的一些個人理解

2022-02-21 19:35:32 字數 2504 閱讀 4137

字型大小的設定單位,常用的有2種:px、pt。這兩個有什麼區別呢?

先搞清基本概念:px就是表示pixel,畫素,是螢幕上顯示資料的最基本的點;

pt就是point,是印刷行業常用單位,等於1/72英吋。

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

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

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

分清「螢幕效果」和「列印效果」:

在瀏覽網頁過程中,所有的「大」「小」概念,都是基於「螢幕」這個「介面」上。「螢幕」上的各種資訊,包括文字、、**等等,都會隨螢幕的解析度變化 而變化,乙個100px寬度大小的,在800×600解析度下,要佔螢幕寬度的1/8,但在1024×768下,則只佔約1/10。所以如果在定義字型大小時,使用px作為單位,那一旦使用者改變顯示器解析度從800到1024,使用者實際看到的文字就要變「小」(自然長度單位),甚至會看不清,影響瀏覽。

那是不是用pt做單位就沒這樣的問題呢?錯!問題同樣出現。剛才的例子已經很清楚的說明,在不同解析度下,無論是px還是pt,都會改變大小 。以現在的電腦螢幕情況,還沒有一種單位可以保證,在不同解析度下,乙個文字大小可以「固定不變」。因為這很難以實現也不是很有必要:全球電腦使用者以億來 數,螢幕從14寸到40寸甚至更高都有,螢幕大小不同,解析度也不同,要保證乙個字型在所有使用者面前大小一樣,實在是mission impossible。另外,電腦有其自身的調節性。

那在頁面設計中到底是用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,每英吋的畫素(點)數,是乙個率,表示了「清晰度」,「精度」

px和pt轉換的公式:

以前在文章中介紹過px和pt的轉換規則,其實很簡單,pt=px乘以3/4。

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

px和em轉換的公式:

對於px轉em的方法也類似,就是em=1/16乘以px

PDV的一些個人理解

最近剛剛考完sas base,對這個考試的一大感受就是,只要你理解了pdv,基本上就不成問題。接下來談談我對pdv的理解吧,也算是學習sas的過程中的乙個筆記。sas的執行有兩個階段需要了解,編譯階段 compilation phase 和執行階段 execution phase 編譯階段sas主要...

Reflect 的一些個人理解

vue 3.0出來後,各種原始碼剖解的文章多了起來,其中proxy和reflect兩個api頻繁出現。查詢了一下阮一峰大佬的文件後,自己也有了一些些理解 reflect物件與proxy物件一樣,也是 es6 為了操作物件而提供的新 api。其中reflect是讓以前類似object.definepr...

遞迴演算法 一些個人理解

遞迴演算法,從定義上來說,是一種直接或者間接地呼叫自身的一種演算法,這裡的自己可以是函式或者方法。遞迴演算法的思想或者說實質就是把實際的問題分解成規模較小的乙個個的子問題,然後不斷使用遞迴呼叫方法來求得問題的解。要學習和使用遞迴演算法,就要從最基本的定義上來先解讀。遞迴演算法是把問題轉化為規模縮小了...