解讀合適的網(wǎng)頁字號(hào)大小_建站經(jīng)驗(yàn)教程
推薦:談?wù)鹃L建站,選好虛擬主機(jī)隨著網(wǎng)站建設(shè)門檻的降低,現(xiàn)在開始有越來越多的人投身于網(wǎng)站建設(shè)。做為普通的個(gè)人站長,大部分人在剛建立網(wǎng)站時(shí)一般都是選擇虛擬主機(jī)做為網(wǎng)站空間。本文主要想通過本人建站的經(jīng)歷談?wù)務(wù)鹃L建站時(shí)選擇好的虛擬主機(jī)的重要性。 2008年的最后一天,我在一家不怎么
文字大小,是用戶體驗(yàn)中的一個(gè)重要部分。
不同的分辨率,不同的顯示器尺寸,不同的DPI,乃至不同的瀏覽器設(shè)置,都會(huì)對(duì)最終展現(xiàn)的文字大小帶來影響。雖然現(xiàn)在很多瀏覽器已經(jīng)可以方便地縮放頁面,但用戶每次光臨都要重新縮放,總歸麻煩,何況還有許多用戶不知道如何縮放頁面。最好還是根據(jù)用戶的分辨率給用戶一個(gè)比較體貼的默認(rèn)字號(hào),那這個(gè)字號(hào)多大合適呢?
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)呢?
第一步:統(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ù)僅供參考)
第二步:盤算每個(gè)分辨率主流屏幕尺寸的物理寬度 現(xiàn)在的顯示器長寬比不但有4:3的尺度屏,16:10的寬屏,還有更多不規(guī)則比例,為了在差異長寬比的顯示器之間進(jìn)行比擬,統(tǒng)一應(yīng)用橫向分辨率來統(tǒng)計(jì)。用主流尺寸和長寬比(假設(shè)像素的長和寬相同)盤算出屏幕寬度(英寸),再換算成雄制(毫米),將其一一對(duì)應(yīng)就可看出屏幕巨細(xì)的趨勢(shì)。再結(jié)合各分辨率的用戶漫衍,成果如下圖所示(圖片中每個(gè)點(diǎn)對(duì)應(yīng)一個(gè)分辨率,橫軸為屏幕橫向的像素?cái)?shù),縱軸為該屏幕的物理寬度,氣泡巨細(xì)表示應(yīng)用該分辨率的用戶人數(shù)。其中藍(lán)色氣泡表示尺度屏,紫色表示寬屏):最大的三個(gè)氣泡分辨是1024*768,1280*1024,1280*800。

第三步:盤算差異顯示器上的字號(hào)巨細(xì) 用屏幕的物理寬度除以像素寬度,就可以得到每個(gè)像素的寬度。然后用指定的文字物理巨細(xì)除以這個(gè)數(shù),就可以得到在差異分辨率下所需的字號(hào)。例如要顯示4.32mm見方的文字,各分辨率下分辨須要如下的字號(hào)(對(duì)條記本和臺(tái)式機(jī)分辨統(tǒng)計(jì)):

差異分辨率下須要的字號(hào) 可以看出條記本和臺(tái)式機(jī)的尺寸相差很大,為便利應(yīng)用,應(yīng)用各分辨率的主流尺寸或平均尺寸盤算出指定字號(hào)在每個(gè)分辨率下所需的字號(hào)。(下圖去失了根本只用在條記本上的那些分辨率),以4.32mm、3.77mm、3.25mm為例(17寸1280*1024分辨率下的16、14和12號(hào)字):

為保存穩(wěn)固物理尺寸,各主流顯示器下所需字號(hào)與分辨率的關(guān)系 由于在未開啟cleartype的情形下,一些中文字體在非偶數(shù)字號(hào)下的顯示成果欠佳,所以一般建議應(yīng)用12、14、16、18、22px等偶數(shù)字號(hào)。也就是對(duì)某個(gè)分辨率選擇離它最近的偶數(shù)字號(hào)。例如:屏幕橫向分辨率在1100以下的采取14px,1100到1500采取16px,1500以上采取18px,依此類推。 到人眼的距離 雖然條記本的字號(hào)遠(yuǎn)小于臺(tái)式機(jī),可是實(shí)際并沒有給我們帶來那么大的未便,這是因?yàn)椋阂话銘?yīng)用條記本時(shí)人眼到屏幕的距離比應(yīng)用臺(tái)式機(jī)時(shí)要近一些。賣上網(wǎng)本越來越小時(shí)(極真?zhèn)例子就是手機(jī)),人們應(yīng)用的時(shí)候可能會(huì)拿的更近,這樣視角更大。反之,賣顯示器越來越大時(shí)(24寸甚至更大),出于整體視角等方面斟酌,人們也可能離屏幕遠(yuǎn)些,從而減小了視角。 定量來說:由于文字巨細(xì)h(4"5mm)相對(duì)人眼到文字的距離d(30"60cm)非常小,可近似認(rèn)為視角θ正比于h,并與d成反比(θ≈tgθ=h/d)。也就是說,同樣巨細(xì)的文字,距離二尺時(shí)看到的只有距離一尺時(shí)的一半巨細(xì)。 也就是說,顯示器只能傳達(dá)一個(gè)大概的尺寸,每個(gè)用戶在具體操縱時(shí)仍會(huì)通過不自覺地調(diào)理到屏幕的距離來調(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)單位應(yīng)用em而不是px,一般來說,閱讀器默認(rèn)1em=16px,0.875em\1em\1.125em即為14\16\18px。 應(yīng)用字號(hào)縮放時(shí)請(qǐng)注意:對(duì)該div內(nèi)的題目等字號(hào)單位最好應(yīng)用百分比,而不是穩(wěn)固字號(hào),以便隨正文同步縮放。 附:本文圖表所引用的重要數(shù)據(jù)

分享:解讀網(wǎng)絡(luò)營銷中的七種毒品如今中國的網(wǎng)站數(shù)量已經(jīng)超過300萬,網(wǎng)絡(luò)營銷已成為這些網(wǎng)站必須面對(duì)的事情,許多網(wǎng)絡(luò)營銷人都在如饑似渴的尋找網(wǎng)絡(luò)營銷方法和手段。其實(shí)在網(wǎng)絡(luò)營銷過程中,有很多急功近利的網(wǎng)絡(luò)營銷手段,就像
- 雙十二電商促銷思路淺析
- Matt Cutts:不要把注意力放在PR上
- 百度要革自己的命?移動(dòng)搜索或取消PC網(wǎng)頁收錄
- Google adsense帳戶被封到解封全過程
- 菜鳥如何通過競(jìng)價(jià)賺取第一桶金?
- 不接電話會(huì)讓你的備案號(hào)注銷
- 盧松松:搜搜已停止收錄網(wǎng)頁
- 你懂得:百度文庫也玩?zhèn)人+V認(rèn)證了
- 頭腦風(fēng)暴:為什么搜索引擎不在乎我們?
- 搜狗聯(lián)盟:360 X 300的廣告位變現(xiàn)能力強(qiáng)
- 盧松松:做這樣的資源站,長不了
- 盧松松:一個(gè)小學(xué)教師建站的不惑與困惑
- 相關(guān)鏈接:
- 教程說明:
建站經(jīng)驗(yàn)教程-解讀合適的網(wǎng)頁字號(hào)大小
。