解讀合適的網頁字號大小_建站經驗教程
推薦:談站長建站,選好虛擬主機隨著網站建設門檻的降低,現在開始有越來越多的人投身于網站建設。做為普通的個人站長,大部分人在剛建立網站時一般都是選擇虛擬主機做為網站空間。本文主要想通過本人建站的經歷談談站長建站時選擇好的虛擬主機的重要性。 2008年的最后一天,我在一家不怎么
文字大小,是用戶體驗中的一個重要部分。
不同的分辨率,不同的顯示器尺寸,不同的DPI,乃至不同的瀏覽器設置,都會對最終展現的文字大小帶來影響。雖然現在很多瀏覽器已經可以方便地縮放頁面,但用戶每次光臨都要重新縮放,總歸麻煩,何況還有許多用戶不知道如何縮放頁面。最好還是根據用戶的分辨率給用戶一個比較體貼的默認字號,那這個字號多大合適呢?
12px?14px?15px?16px? 還是壓根就不應該使用px這個單位呢?
問題的根源,在于屏幕上的一切字號單位(px,pt,em)都是相對單位,單憑它們并不能確定文字的實際大小。何況人對文字大小的根本感知在于眼睛的視角,這不僅取決于文字的物理尺寸,還取決于它到人眼的距離。
物理尺寸
首先假定一個我們希望達到的文字物理尺寸,例如設定為17寸1280 * 1024顯示器上的16px,計算可得它的高度約是4.32mm,我們計劃讓網頁文字在大部分顯示器上都比較接近這個大小,那么在不同分辨率下應該顯示成多大的字號呢?
第一步:統計用戶主要的分辨率和對應的屏幕大小。
要在物理尺寸和分辨率之間換算,首先要統計分辨率和對應的屏幕尺寸。用戶分辨率的分布情況可以從網站的統計日志里獲得。由于每個分辨率設置可能對應好幾個不同尺寸的屏幕,而屏幕尺寸又無法通過網頁獲得,只好對現在的顯示器市場進行統計分析:針對某一分辨率,統計可能的屏幕尺寸范圍,從最小到最大,相對主流的是多大(或使用該范圍的中間值作為主流尺寸)。如下圖所示——

電腦顯示器市場(產品種類眾多,難免掛一漏萬,數據僅供參考)
第二步:盤算每個分辨率主流屏幕尺寸的物理寬度 現在的顯示器長寬比不但有4:3的尺度屏,16:10的寬屏,還有更多不規則比例,為了在差異長寬比的顯示器之間進行比擬,統一應用橫向分辨率來統計。用主流尺寸和長寬比(假設像素的長和寬相同)盤算出屏幕寬度(英寸),再換算成雄制(毫米),將其一一對應就可看出屏幕巨細的趨勢。再結合各分辨率的用戶漫衍,成果如下圖所示(圖片中每個點對應一個分辨率,橫軸為屏幕橫向的像素數,縱軸為該屏幕的物理寬度,氣泡巨細表示應用該分辨率的用戶人數。其中藍色氣泡表示尺度屏,紫色表示寬屏):最大的三個氣泡分辨是1024*768,1280*1024,1280*800。

第三步:盤算差異顯示器上的字號巨細 用屏幕的物理寬度除以像素寬度,就可以得到每個像素的寬度。然后用指定的文字物理巨細除以這個數,就可以得到在差異分辨率下所需的字號。例如要顯示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.875em\1em\1.125em即為14\16\18px。 應用字號縮放時請注意:對該div內的題目等字號單位最好應用百分比,而不是穩固字號,以便隨正文同步縮放。 附:本文圖表所引用的重要數據

分享:解讀網絡營銷中的七種毒品如今中國的網站數量已經超過300萬,網絡營銷已成為這些網站必須面對的事情,許多網絡營銷人都在如饑似渴的尋找網絡營銷方法和手段。其實在網絡營銷過程中,有很多急功近利的網絡營銷手段,就像
- 相關鏈接:
- 教程說明:
建站經驗教程-解讀合適的網頁字號大小
。