您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

    網(wǎng)頁設(shè)計(jì)中最重要的細(xì)節(jié)之一——字體(4)

    要比一塊10寸分辨率 1024×768 像素的屏幕上的 10px 大小的文字顯得更大一些。下面來說一下它們的區(qū)別和用法等。

    px:像素單位,10px 表示10個(gè)像素大小,在現(xiàn)在的網(wǎng)頁設(shè)計(jì)中,常被用來表示字體大小。很方便很直觀,但是有一些弊端。對(duì)于可用性不太友好,因?yàn)槭?ldquo;絕對(duì)”單位,所以有些瀏覽器(早期)的字體放大縮小功能失效。瀏覽器的默認(rèn)字體大小為 16px ,早期的網(wǎng)頁,由于屏幕分辨率比較低,通常采用12px作為網(wǎng)頁正文的標(biāo)準(zhǔn)字體大小。但是在現(xiàn)在,感覺有點(diǎn)偏小,比較長的文章來說,瀏覽者看起來費(fèi)勁?,F(xiàn)在我更主張使用 14px 作為標(biāo)準(zhǔn)字體,16px 作為中等字體,18px 作為較大字體,12px 作為偏小字體比較合適。

    em:相對(duì)大小,它表示的字體大小不固定,根據(jù)基礎(chǔ)字體大小進(jìn)行相對(duì)大小的處理。瀏覽器默認(rèn)的字體大小為 16px,如果你對(duì)一段文字指定 1em,那么表現(xiàn)出來的就是 16px大小,2em 就是 32px 大小。相對(duì)大小單位有很廣泛的用途,由于它的相對(duì)性,所以對(duì)跨平臺(tái)跨設(shè)備的字體大小處理上有得天獨(dú)厚的優(yōu)勢(shì),同時(shí)對(duì)于響應(yīng)式的布局設(shè)計(jì)也有很大的幫助。但是缺點(diǎn)很明顯,你無法直觀的看到大小,而且對(duì)于不同的大小,你需要精確的計(jì)算。

    字體實(shí)際表現(xiàn)出來的大小

    上面只是說了兩種形容字體大小的單位,但實(shí)際上表現(xiàn)出來的字體大小,并非簡(jiǎn)單的單位前面的數(shù)值。除了數(shù)值之外,潛行者m 個(gè)人認(rèn)為還跟 設(shè)備 和 視距 有關(guān)。

    設(shè)備就是指顯示設(shè)備的分辨率及屏幕大小,跟前面解釋 px 單位的相對(duì)性相同,如果在一塊非常大的分辨率非常低的屏幕(像廣場(chǎng)電子屏),即使很小的像素,也會(huì)展示出很大的字。這也就是為什么早期的 800×600 像素橫行的時(shí)候,大家都是用12px大小的原因。因?yàn)轱@示的文字已經(jīng)夠大了。

    視距就是指瀏覽者看文字的距離。很明顯的道理,眼睛距離屏幕越遠(yuǎn),看起來上面的文字就變小了。

    所以在選擇網(wǎng)頁中字體大小的時(shí)候,還需要考慮你的用戶的實(shí)際使用習(xí)慣。同一個(gè)網(wǎng)頁,在筆記本上和在手機(jī)上使用的時(shí)候,字體大小就不應(yīng)該相同,因?yàn)殡娔X屏幕大分辨率高,而且視距通常比較近而且固定,手機(jī)等屏幕小分辨率較低,視距更近(大家都喜歡躺著或者趴著玩手機(jī)啦),所以這些都要考慮,才能得到一個(gè)合理的大小。

    為什么是偶數(shù)字體大小

    [教程作者:admin]
    免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
    本文地址:http://m.likemindfilms.com/tutorial/di1286.html
    為什么蘋果官網(wǎng)的設(shè)計(jì)如此吸引人?
    2013年10大網(wǎng)頁設(shè)計(jì)趨勢(shì)
    圖趣網(wǎng)微信
    建議反饋
    ×