SS中長度單位pt px dpi詳解

2021-04-22 11:06:00 字數 786 閱讀 9429

在印刷排版中「point」是乙個絕對的單位,它等於 1/72 英吋。可以用尺子丈量的,物理的英吋。

但在css中pt的含義卻非如此,例如我們指定乙個字型是9pt,瀏覽器會以css規範解釋,它等於:

9 * 1/72 = 1/8 inch

這是乙個誤解,因為我們的顯示器被分割為了乙個個的畫素,單個畫素只能有一種顏色(為了簡化,這裡暫不討論次畫素反鋸齒技術),要在螢幕上顯示,必須先把以pt為單位的長度轉換為以畫素為單位的長度,這個轉換的媒介,就是dpi(事實上,這裡的所謂的dpi,是作業系統和瀏覽器中使用的術語,即為 ppi, pixels per inch,掃瞄器、印表機、數位相機中的dpi是不同的)。

例如,無論在哪個作業系統中,firefox瀏覽器預設的dpi都是96,那麼實際上:

9pt = 9 * 1/72 * 96 = 12px

所以,雖然「pdi」中的「i」和「1pt」等於1/72 inch中的「inch」,都不代表物理上的英吋,但這兩個單位互相之間是相等的,也就在相乘中約掉了。

那麼,真實的物理長度怎麼計算呢?請拿出一把尺子,丈量你的顯示器的可見寬度 (我這裡是 11.2992 英吋),除以橫向解析度 (我這裡是 1024 畫素),得到的就是每個畫素的物理長度。

現在我們可以回答這樣乙個問題,網頁上 9pt 的字型究竟占用了多寬的空間?答案是:

9 * 1/72 * 96 * 11.2992 / 1024 = 0.1324 英吋 = 0.3363 厘公尺

有興趣的朋友可以自己測試一下。

pt, px, DPI 關於長度單位的詳解

pt,px,dpi 關於長度單位的誤解 february 24th 2006 posted to css,browsers,typography 在印刷排版中,point 是乙個絕對的單位,它等於 1 72 英吋,可以用尺子丈量的,物理的英吋。但在 css 中 pt 的含義卻非如此,例如我們指定乙個...

pt, px, DPI 關於長度單位的誤解

在印刷排版中,point 是乙個絕對的單位,它等於 1 72 英吋,可以用尺子丈量的,物理的英吋。但在 css 中 pt 的含義卻非如此,例如我們指定乙個字型是 9pt,我們會以為按照 css 規範,它等於 9 1 72 1 8 inch 這是乙個誤解,因為我們的顯示器被分割為了乙個個的畫素,單個畫...

關於Android中長度單位

看到有很多不太理解dp sp和px的區別 現在這裡介紹一下dp和sp。dp也就是dip。這個和sp基本類似。如果設定表示長度 高度等屬性時可以使用dp 或sp。但如果設定字型,需要使用sp。dp是與密度無關,sp除了與密度無關外,還與scale無關。如果螢幕密度為160,這時dp和sp和px是一樣的...