一個是設備坐標，一個是邏輯坐標，兩者是不同的。
px是個相對單位，一般像素的參考值為：在一個像素密度是90 pdi的顯示器上，正常人從距離顯示器28英寸處看一個像素的視角應該不小於0.0227度。
1 px定義的在設置為大字體之后不會變；pt定義的會變
2 px是相對單位，pt是絕對單位
如果大家做網頁是為了瀏覽而不是印刷，建議大家用 px 來定義字號，理由如下：
1. 如前面 Jet 所述，px 指的是象數，象數這個概念本身就是為了顯示才引用的，而 pt （磅值）很大程度上是為了印刷不出錯，印刷和顯示有很大的不同，這里不多說，吉吉所說的情況也是用 pt 帶來的弊病。
2. Html 代碼中大部分默認的單位，例如 width=10 等等，都是以 px 做為單位的，屏幕的總寬度高度也是以 px 做為單位，800*600 就是寬 800px; 高 600px; 我們把字號定義為 12px; 可以很方便的計算，例如，10個中文字 ，他的寬度就是 10*12=120，我們很容易可以寫一個 width=120 的表格把他框住，這只是一個例子。
3. 請大家做一個試驗，body { font-size:10.5pt; } 和 body { font-size:14.7px; } 這兩種定義方法，要讓 Netscape 顯示那種 10.5 磅的比較優化的字號，只有定義成 14.7px 才可以，否則只有 IE 才認識。
-------------------------------------------------------------
在CSS樣式表中，長度單位分兩種：
相對長度單位，如px, em等
絕對長度單位，如pt,mm等
也談px和pt的區別
經常看到有人拿px和pt比較，主要是為了爭辯在確定字體大小(font-size)或其它CSS屬性大小時，用什么樣的CSS長度單位更加好。有人說，用pt更好，因為pt是絕對長度單位，不會因為屏幕分辨率大小，或者其它因素而改變。
我去做了一個測試，寫了這樣一個HTML例子。代碼如下：
<html>
<head><title>CSS單位長度區別 - px和pt的區別</title></head>
<body >
<p style = "font-size:20pt;">Font-size is 20pt</p>
<p style = "font-size:20px;">Font-size is 20px</p>
</body>
</html>
我將我的顯示器分別調到1024*768和800*600的分辨率(指screen resolution)。不管是用pt還是用px設置的字體，都隨着分辨率變化而變化。(我使用的瀏覽器是IE6，其它瀏覽器上尚未測試過。)
我又寫了另外一個HTML例子，測試一下cm(厘米)。代碼如下：
<html>
<head><title>CSS長度單位的區別 - pt,px和cm的區別</title></head>
<body >
以下div寬度300pt，高度30pt： <br>
<div style = "width:300pt;height:30pt;border:1px solid blue;"></div>
以下div寬度300px，高度30px：<br>
<div style = "width:300px;height:30px;border:1px solid blue;"></div>
以下div寬度10cm，高度3cm： <br>
<div style = "width:10cm;height:3cm;border:1px solid blue;"></div>
</body>
</html>
結果是，cm(厘米)也是隨着顯示器分辨率變化而變化的。
對於計算機的屏幕設備而言，像素(Pixel)或者說px是一個最基本的單位，就是一個點。其它所有的單位，都和像素成一個固定的比例換算關系。所有的長度單位基於屏幕進行顯示的時候，都統一先換算成為像素的多少，然后進行顯示。所以，就計算機的屏幕而言，相對長度和絕對長度沒有本質差別。任何單位其實都是像素，差別只是比例不同。
如果把討論擴展到其它輸出設備，比如打印機，基本的長度單位可能不是像素，而是其它的和生活中的度量單位一致的單位了。
CSS絕對長度單位是對於輸出設備(output device)而言的。拿pt來說，這是一個在文字排版工具(word,adobe等)中非常常用的字體單位，不管你的顯示器分辨率是1024*768，還是800*600，同一篇文檔打印在紙面上的結果是一樣的。
寫網頁用哪個長度單位更好，是px還是pt呢？
我個人比較偏向px，因為px能夠精確地表示元素在屏幕中的位置和大小，網頁主要是為了屏幕顯示，而不是為了打印等其它需要的。
CSS相對長度單位(relative length unit)
CSS相對長度單位中的相對二字，表明了其長度單位會隨着它的參考值的變化而變化，不是固定的。
以下是CSS相對長度單位列表：
CSS相對長度單位 說明
em 元素的字體高度The height of the element's font
ex 字母x的高度The height of the letter "x"
px 像素Pixels
% 百分比Percentage
CSS絕對長度單位(absolute length unit)
絕對長度單位是一個固定的值。比如我們常用的有mm，就是毫米的意思。
以下是CSS絕對長度單位列表：
CSS絕對長度單位 說明
in 英寸Inches (1 英寸 = 2.54 厘米)
cm 厘米Centimeters
mm 毫米Millimeters
pt 點Points (1點 = 1/72英寸)
pc 皮卡Picas (1 皮卡 = 12 點)
---------------------------------------------------------------------------------------------------
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
Meet the Units
“Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
Addendum (January 2011)
It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there. As long as the body is set using the percent unit, you may choose to use either percent or ems on any other CSS rules and selectors and still retain the benefits of using percent as your base font size. Over the past couple of years, this has really become the standard in design.
Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments over the course of the past two years!
Html代碼Font-Size中px與pt的區別
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
猜您在找
word中字體大小（pt）和網頁中css設置font-size時用的px大小對應關系
word中字體大小（pt）和網頁中css設置font-size時用的px大小對應關系
html根標簽設置font-size為100px，使用rem，body沒設置字體大小
移動端rem設置，自動更改html
css中px和pt的區別是什么
font-size 你所不知道的值
移動端適配——font-size計算
css html 移動端適配 font-size: 13.33vw rem + vw
vue中適配，頁面使用rem，函數設置rem基礎font-size自適應問題
HTML中字體單位px pt em之間的轉換