雖然現(xiàn)在很多瀏覽器已經(jīng)可以方便地縮放頁面，但用戶每次光臨都要重新縮放，總歸麻煩，何況還有許多用戶不知道如何縮放頁面。更好還是根據(jù)用戶的分辨率給用戶一個(gè)比較體貼的默認(rèn)字號(hào)，那這個(gè)字號(hào)多大合適呢？ 文字大小，是用戶體驗(yàn)中的一個(gè)重要部分。不同的分辨率，不同的顯示器尺寸，不同的DPI，乃至不同的瀏覽器設(shè)置，都會(huì)對(duì)更終展現(xiàn)的文字大小帶來影響。
12px、14px、15px、16px還是壓根就不應(yīng)該使用px這個(gè)單位呢？
問題的根源，在于屏幕上的一切字號(hào)單位（px,pt,em）都是相對(duì)單位，單憑它們并不能確定文字的實(shí)際大小。何況人對(duì)文字大小的根本感知在于眼睛的視角，這不僅取決于文字的物理尺寸，還取決于它到人眼的距離。
物理尺寸
首先假定一個(gè)我們希望達(dá)到的文字物理尺寸，例如設(shè)定為17寸1280 * 1024顯示器上的16px，計(jì)算可得它的高度約是4.32mm，我們計(jì)劃讓網(wǎng)頁文字在大部分顯示器上都比較接近這個(gè)大小，那么在不同分辨率下應(yīng)該顯示成多大的字號(hào)呢？
前幾步：計(jì)算每個(gè)分辨率主流屏幕尺寸的物理寬度
現(xiàn)在的顯示器長(zhǎng)寬比不**4：3的標(biāo)準(zhǔn)屏，16：10的寬屏，還有更多不規(guī)則比例，為了在不同長(zhǎng)寬比的顯示器之間進(jìn)行比較，統(tǒng)一使用橫向分辨率來統(tǒng)計(jì)。用主流尺寸和長(zhǎng)寬比（假設(shè)像素的長(zhǎng)和寬相同）計(jì)算出屏幕寬度（英寸），再換算成公制（毫米），將其一一對(duì)應(yīng)就可看出屏幕大小的趨勢(shì)。再結(jié)合各分辨率的用戶分布，結(jié)果如下圖所示（圖片中每個(gè)點(diǎn)對(duì)應(yīng)一個(gè)分辨率，橫軸為屏幕橫向的像素?cái)?shù)，縱軸為該屏幕的物理寬度，氣泡大小表示使用該分辨率的用戶人數(shù)。其中藍(lán)色氣泡表示標(biāo)準(zhǔn)屏，紫色表示寬屏）：更大的三個(gè)氣泡分別是1024*768,1280*1024,1280*800。
**步：統(tǒng)計(jì)用戶主要的分辨率和對(duì)應(yīng)的屏幕大小。
要在物理尺寸和分辨率之間換算，首先要統(tǒng)計(jì)分辨率和對(duì)應(yīng)的屏幕尺寸。用戶分辨率的分布情況可以從網(wǎng)站的統(tǒng)計(jì)日志里獲得。由于每個(gè)分辨率設(shè)置可能對(duì)應(yīng)好幾個(gè)不同尺寸的屏幕，而屏幕尺寸又無法通過網(wǎng)頁獲得，只好對(duì)現(xiàn)在的顯示器市場(chǎng)進(jìn)行統(tǒng)計(jì)分析：針對(duì)某一分辨率，統(tǒng)計(jì)可能的屏幕尺寸范圍，從更小到更大，相對(duì)主流的是多大（或使用該范圍的中間值作為主流尺寸）。如下圖所示——
電腦顯示器市場(chǎng)（產(chǎn)品種類繁多，難免掛一漏萬，數(shù)據(jù)僅供參考）
第三步：計(jì)算不同顯示器上的字號(hào)大小
用屏幕的物理寬度除以像素寬度，就可以得到每個(gè)像素的寬度。然后用指定的文字物理大小除以這個(gè)數(shù)，就可以得到在不同分辨率下所需的字號(hào)。例如要顯示4.32mm見方的文字，各分辨率下分別需要如下的字號(hào)（對(duì)筆記本和臺(tái)式機(jī)分別統(tǒng)計(jì)）：
不同分辨率下需要的字號(hào)
可以看出筆記本和臺(tái)式機(jī)的尺寸相差很大，為方便使用，使用各分辨率的主流尺寸或平均尺寸計(jì)算出指定字號(hào)在每個(gè)分辨率下所需的字號(hào)。（下圖去掉了基本只用在筆記本上的那些分辨率），以4.32mm、3.77mm、3.25mm為例（17寸1280*1024分辨率下的16、14和12號(hào)字）：
為保持固定物理尺寸，各主流顯示器下所需字號(hào)與分辨率的關(guān)系
由于在未開啟cleartype的情況下，一些中文字體在非偶數(shù)字號(hào)下的顯示效果欠佳，所以一般建議使用12、14、16、18、22px等偶數(shù)字號(hào)。也就是對(duì)某個(gè)分辨率選擇離它更近的偶數(shù)字號(hào)。例如：屏幕橫向分辨率在1100以下的采用14px，1100到1500采用16px，1500以上采用18px，依此類推。
到人眼的距離
定量來說：由于文字大小h（4~5mm）相對(duì)人眼到文字的距離d（30~60cm）非常小，可近似認(rèn)為視角θ正比于h,并與d成反比（θ≈tgθ=h/d）。也就是說，同樣大小的文字，距離二尺時(shí)看到的只有距離一尺時(shí)的一半大小。
雖然筆記本的字號(hào)遠(yuǎn)小于臺(tái)式機(jī)，可是實(shí)際并沒有給我們帶來那么大的不便，這是因?yàn)椋阂话闶褂霉P記本時(shí)人眼到屏幕的距離比使用臺(tái)式機(jī)時(shí)要近一些。當(dāng)上網(wǎng)本越來越小時(shí)（更端的例子就是手機(jī)），人們使用的時(shí)候可能會(huì)拿的更近，這樣視角更大。反之，當(dāng)顯示器越來越大時(shí)（24寸甚至更大），出于整體視角等方面考慮，人們也可能離屏幕遠(yuǎn)些，從而減小了視角。
也就是說，顯示器只能傳達(dá)一個(gè)大概的尺寸，每個(gè)用戶在具體操作時(shí)仍會(huì)通過不自覺地調(diào)節(jié)到屏幕的距離來調(diào)整所看到的實(shí)際效果。面對(duì)越來越多的筆記本用戶（請(qǐng)參照上一篇：筆記本電腦的市場(chǎng)份額），前端設(shè)計(jì)師們只能給出一個(gè)針對(duì)筆記本和臺(tái)式機(jī)平均尺寸的頁面效果，具體就靠用戶去自我調(diào)整了。
用JS實(shí)現(xiàn)不同分辨率下自動(dòng)調(diào)整字號(hào)
例如網(wǎng)頁正文所在div的id為content——
注：為保證各瀏覽器下文字均可縮放，字號(hào)單位使用em而不是px，一般來說，瀏覽器默認(rèn)1em=16px，0.875em\1em\1.125em即為14\16\18px。
使用字號(hào)縮放時(shí)請(qǐng)注意：對(duì)該div內(nèi)的標(biāo)題等字號(hào)單位更好使用百分比，而不是固定字號(hào)，以便隨正文同步縮放。
附：本文圖表所引用的主要數(shù)據(jù)
網(wǎng)頁設(shè)計(jì)字號(hào)多大更合適，謝謝閱讀。
