在這個顯示器百花齊放的時代，網頁設計師往往需要考慮不同客戶端的瀏覽體驗。
文字大小，是使用者體驗中的重要部分。不同的分辨率，不同的顯示器尺寸，不同的DPI，甚至不同的瀏覽器設置，都會對最終展現的文字大小帶來影響。雖然現在很多瀏覽器已經可以方便地縮放頁面，但用戶每次光臨都要重新縮放，總歸麻煩，何況還有許多用戶不知道如何縮放頁面。最好還是根據使用者的解析度給使用者一個比較體貼的預設字號，那這個字號多大合適呢?
12px?14px?15px?16px? 還是壓根就不應該使用px這個單位呢?
問題的根源，在於螢幕上的一切字號單位(px，pt，em)都是相對單位，單憑它們並不能確定文字的實際大小。何況人對文字大小的根本感知在於眼睛的視角，這不僅取決於文字的物理尺寸，也取決於它到人眼的距離。
物理尺寸
首先假定一個我們希望達到的文字物理尺寸，例如設定為17寸1280 * 1024顯示器上的16px，計算可得它的高度約是4.32mm，我們計劃讓網頁文字在大部分顯示器上都比較接近這個大小，那麼在不同解析度下應該顯示成多大的字號呢?
第一步：統計使用者主要的解析度和對應的螢幕大小。
要在物理尺寸和解析度之間換算，首先要統計解析度和對應的螢幕尺寸。使用者解析度的分佈可以從網站的統計日誌中獲得。由於每個分辨率設定可能對應好幾個不同尺寸的螢幕，而螢幕尺寸又無法透過網頁獲得，只好對現在的顯示器市場進行統計分析：針對某一分辨率，統計可能的螢幕尺寸範圍，從最小到最大，相對主流的是多大(或使用該範圍的中間值作為主流尺寸)。如下圖所示——
電腦顯示器市場(產品種類繁多，難免掛一漏萬，數據僅供參考)
第二步：計算每個解析度主流螢幕尺寸的物理寬度
現在的顯示器長寬比不僅有4：3的標準屏，16：10的寬屏，還有更多不規則比例，為了在不同長寬比的顯示器之間進行比較，統一使用橫向分辨率來統計。用主流尺寸和長寬比(假設像素的長和寬相同)計算出螢幕寬度(英吋)，再換算成公制(毫米)，將其一一對應就可看出螢幕大小的趨勢。再結合各分辨率的用戶分佈，結果如下圖所示(圖片中每個點對應一個分辨率，橫軸為屏幕橫向的像素數，縱軸為該屏幕的物理寬度，氣泡大小表示使用該分辨率的使用者人數。
第三步：計算不同顯示器上的字號大小
用螢幕的物理寬度除以像素寬度，就可以得到每個像素的寬度。然後用指定的文字物理大小除以這個數，就可以得到在不同解析度下所需的字號。例如要顯示4.32mm見方的文字，各解析度下分別需要如下的字號(對筆記本和桌上型電腦分別統計)：
不同解析度下所需的字號
可以看出筆記本和桌上型電腦的尺寸相差很大，為方便使用，使用各解析度的主流尺寸或平均尺寸計算出指定字號在每個解析度下所需的字號。 (下圖去掉了基本上只用在筆記本上的那些解析度)，以4.32mm、3.77mm、3.25mm為例(17吋1280*1024解析度下的16、14和12號字)：
為維持固定物理尺寸，各主流顯示器下所需字號與解析度的關係
由於在未開啟cleartype的情況下，一些中文字體在非偶數字號下的顯示效果欠佳，所以一般建議使用12、14、16、18、22px等偶數字號。也就是對某個解析度選擇離它最近的偶數字號。例如：螢幕橫向解析度在1100以下的採用14px，1100到1500採用16px，1500以上採用18px，依此類推。
到人眼的距離
雖然筆記本的字號遠小於桌上型電腦，但實際上並沒有給我們帶來那麼大的不便，這是因為：一般使用筆記本時人眼到螢幕的距離比使用桌上型電腦時要近一些。當上網筆電越來越小時(極端的例子就是手機)，人們使用的時候可能會拿的更近，這樣視角更大。反之，當顯示器越來越大時(24吋甚至更大)，出於整體視角等方面考慮，人們也可能離螢幕遠些，從而減小了視角。
定量來說：由於文字大小h(4~5mm)相對人眼到文字的距離d(30~60cm)非常小，可近似認為視角θ正比於h，並與d成反比(θ≈tgθ=h/ d)。也就是說，同樣大小的文字，距離二尺時看到的只有距離一尺時的一半大小。
也就是說，顯示器只能傳達一個大概的尺寸，每個使用者在具體操作時仍會透過不自覺地調整到螢幕的距離來調整所看到的實際效果。面對越來越多的筆記型電腦使用者(請參考上一篇：筆記型電腦的市場份額)，前端設計師們只能給出一個針對筆記本和台式機平均尺寸的頁面效果，具體就靠用戶去自我調整了。
用JS實現不同解析度下自動調整字號
例如網頁正文所在div的id為content——
註：為確保各瀏覽器下文字皆可縮放，字號單位使用em而非px，一般來說，瀏覽器預設1em=16px，0.875em1em1.125em即為141618px。
使用字號縮放時請注意：對該div內的標題等字號單位最好使用百分比，而不是固定字號，以便隨正文同步縮放。
附：本文圖表所引用的主要數據
本站首發：http://www.mhzx1.com