當(dāng)前位置:首頁 >  站長 >  建站經(jīng)驗(yàn) >  正文

簡單談一下制作網(wǎng)頁時(shí)如何選擇字體和字體大小

 2014-09-11 16:32  來源: 用戶投稿   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競價(jià),好“米”不錯(cuò)過

網(wǎng)站建設(shè)中的字體及字體大小的的選擇直接影響著網(wǎng)站整體的視覺效果,在某種程度上也會(huì)對網(wǎng)站優(yōu)化起到一定的作用,比如大號字體和黑體字在網(wǎng)頁上顯示 更加醒目,具有加強(qiáng)某些信息顯示的效果,而搜索引擎也會(huì)捕捉到這些字體的大小,更重視這些大號字體和黑體字內(nèi)的信息。雖然現(xiàn)在的字體種類非常多,但是可以供網(wǎng)站建設(shè)人員選擇的字體還是比較少的,主要是因?yàn)榫W(wǎng)站建設(shè)要以用戶體驗(yàn)為中心,不能把網(wǎng)頁搞得太過于花哨,字體太多就顯得比較亂了,同時(shí)也要考慮到各種瀏覽器對這些字體的兼容性,盡量不讓瀏覽器上顯示字體時(shí)發(fā)生變形,那樣反而不好。當(dāng)然,有時(shí)候?yàn)榱烁玫乇磉_(dá)網(wǎng)站主題,我們還是有必要選擇某種特殊字體來制作網(wǎng)頁,這時(shí)你可以將文字以圖片的形式展示出來,這樣就可以適合各種瀏覽器了。下面筆者簡單談一下制作網(wǎng)頁如何選擇字體和字體的大小。

一、網(wǎng)站建設(shè)中字體的選擇:

一般網(wǎng)站客戶端計(jì)算機(jī)中都安裝有多種字體,瀏覽器會(huì)使用默認(rèn)字體顯示網(wǎng)頁,如WindowsXP中文版操作統(tǒng)默認(rèn)字體是宋體或新宋體,在后來的 windows操作系統(tǒng)中,以微軟雅黑為默認(rèn)字體,這種字體顯示得更加清晰,取代了XP系統(tǒng)下默認(rèn)中文宋體,支持高清顯示ClearType功能。以上這些字體在大多數(shù)電腦上都有安裝,但是,如果你在制作網(wǎng)頁的時(shí)候,如果選擇了比較特殊的字體,而這種字體用戶電腦里并沒有,那么用戶瀏覽網(wǎng)頁時(shí)仍不能顯示這些字體,這些字體仍以默認(rèn)的宋體或者雅黑字體來顯示。所以,為了適合更多的用戶瀏覽,我們在制作網(wǎng)頁的時(shí)候應(yīng)該使用宋體或者雅黑來作為網(wǎng)頁的基準(zhǔn)字體,盡量少使用特殊字體。當(dāng)你不能確保所設(shè)置字體在所有瀏覽者電腦中都安裝時(shí),使用一種通用字體是可行的辦法。而對于英文字體,可選擇的字體類型相對會(huì)多一些,絕大多數(shù)電腦上都裝有這些英文字體,制作網(wǎng)頁時(shí)選擇什么類型關(guān)系并不太大,只要看著美觀就行。英文通用字體主要包括下面幾類:

1、sans-serif,這種字體是一種有比例但沒有襯線字體,常見字體是Arial。

2、cursive,這種字體是模擬人的筆跡,這種字體大部分是由曲線和比襯線字體更強(qiáng)筆畫修飾組成,常用字體是ComicSans。

3、monospace,這是一種無比例字體,用于模擬打字機(jī)打出字體,這些字體中每個(gè)字符都占有同樣寬度,常用字體是Courier。

4、serif,這是一種成比例有襯線字體,成比例是指字體中所有字母根據(jù)它們不同尺寸占據(jù)不同寬度。襯線是指字體上附加裝飾性細(xì)線,如小寫字母會(huì)在項(xiàng)部和底部附加細(xì)線。常用字體有Times New Roman。

在制作網(wǎng)頁的時(shí)候,為了保證在大多數(shù)瀏覽器上都能正確顯示字體,給用戶呈現(xiàn)出美觀的界面,筆者通常都是選擇使用系統(tǒng)默認(rèn)字體,如中文宋體或新宋體,過些時(shí)日可以選擇雅黑作為默認(rèn)字體,英文則選擇Arial這種字體。這樣可以保證用戶系統(tǒng)中字體缺乏時(shí),瀏覽器也能夠正確識別并 顯示出正常的文字。同時(shí)筆者也建議大多的網(wǎng)站設(shè)計(jì)者都能夠選擇系統(tǒng)默認(rèn)的字體,不要把特殊的字體運(yùn)用在網(wǎng)頁的文字中。如果非要使用這些特殊的字體,筆者建議您使用這些特殊字體制作成圖片,然后將圖片顯示在網(wǎng)頁上的相應(yīng)位置,這樣做法更好一些,但這無形中增大了網(wǎng)頁的體積,這樣的圖片多了會(huì)延緩網(wǎng)頁打開速度。

二、網(wǎng)站建設(shè)中如何選擇字體的大小

網(wǎng)站建設(shè)中字體大小的選擇是用戶體驗(yàn)中的一個(gè)重要部分,過大過小都會(huì)影響用戶體驗(yàn)。在制作網(wǎng)頁的時(shí)候,我們可以根據(jù)文字在網(wǎng)頁中的不同位置和不同等級來分 別使用不同大小的字體。相對來說,內(nèi)容標(biāo)題可以使用較大的字體,而內(nèi)容小標(biāo)題可以采用次一號的字體,而內(nèi)容正文則可以采用正常大小的字體。

對于不同的分辨率,不同的顯示器尺寸,不同的DPI,乃至不同的瀏覽器設(shè)置,都會(huì)對最終在瀏覽器上展現(xiàn)出來的文字大小帶來影響。最好的方式還是在網(wǎng)頁制作時(shí)根據(jù)用戶的分辨率給用戶一個(gè)比較美觀的默認(rèn)字體大小。大多數(shù)專業(yè)的網(wǎng)站建設(shè)人員,都會(huì)習(xí)慣性的使用某一字體大小,比如14px或 12px,因?yàn)?2px和14px基本已經(jīng)成了大多數(shù)網(wǎng)站字體的標(biāo)準(zhǔn)大小,而11px、13px、15px等大小則涉及到一個(gè)鋸齒的問題,特別是在早期的顯示器中,往往不能很好的處理文字的鋸齒問題,使用單數(shù)的像素,極有可能造成鋸齒,所以通常采用偶數(shù)的大小。

在CSS中,最常用的描述字體大小的單位有兩個(gè),即em和px。通常認(rèn)為em為相對大小單位,而px為絕對大小單位。但從實(shí)際應(yīng)用中來講,px像素有時(shí)也像是一種相對大小單位。比如,在一塊15寸分辨率為800×600像素的屏幕上,10px大小的文字,要比一塊10寸分辨率1024×768像素的屏幕上的10px大小的文字顯得更大一些。px為像素單位,20px表示20個(gè)像素大小,在現(xiàn)在的網(wǎng)頁設(shè)計(jì)中,常被用來表示字體大小,方便且直觀。比如12px,14px就是用px作為字體大小,而16px為中等字體,18px為較大字體,12px為偏小字體。em為相對大小單位,它表示的字體大小不固定,根據(jù)基礎(chǔ)字體大小進(jìn)行相對大小的處理。瀏覽器默認(rèn)的字體大小為 16px,如果一段文字指定1em,那么就是代表16px大小,而2em就是32px大小。相對大小單位有很廣泛的用途,由于它的相對性,對跨平臺跨設(shè)備的字體大小處理上很有優(yōu)勢,只是無法直觀的看到大小。

以上是關(guān)于在網(wǎng)站建設(shè)中如何選擇字體和字體大小的介紹。其實(shí)網(wǎng)站建設(shè)就是這樣,有的時(shí)候就算是1px的差異,就可能影響這個(gè)網(wǎng)站的視覺效果,最終影響到網(wǎng)站建設(shè)的質(zhì)量,并影響到用戶的體驗(yàn)。作為專業(yè)網(wǎng)站建設(shè)人員就必須要掌握和了解得更多,并切實(shí)在實(shí)際中測試觀察效果,只有如此,我們才能制作出更加出色的網(wǎng)站。

本文出自云南盈科信息工程(),尊重作者勞動(dòng)成果,請?jiān)谵D(zhuǎn)載時(shí)注明出處。

申請創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
網(wǎng)站建設(shè)
網(wǎng)頁字體

相關(guān)文章

  • 外貿(mào)商城網(wǎng)站建設(shè)哪家好 三大知名外貿(mào)商城綜合對比

    隨著國際化貿(mào)易的融合以及國家對外貿(mào)的支持,外貿(mào)電商越來越火,讓商品出海已經(jīng)是不少中大型企業(yè)的戰(zhàn)略性布局。雖然自建站會(huì)比SaaS有著靈活擴(kuò)展的優(yōu)勢,但如何解決商品出海橫跨在企業(yè)和用戶眼前的語言難題,是不少企業(yè)需要考慮的一個(gè)核心點(diǎn)。

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • Figma中文字體缺失怎么辦,Pixso幫你輕松解決

    剛開始接觸Figma時(shí),經(jīng)常被字體和界面勸退,不是怎么都打不了中文,或是怎么都找不到中文字體。好不容易打出中文字體,很多文字還顯示不全,出現(xiàn)缺字漏字的問題。

    標(biāo)簽:
    網(wǎng)頁字體
  • 網(wǎng)站建設(shè)常用的建站系統(tǒng)推薦

    網(wǎng)站建設(shè)已經(jīng)很是普及的事情,稍微注重網(wǎng)絡(luò)宣傳的企業(yè)或單位都會(huì)有自己的網(wǎng)站,網(wǎng)站建設(shè)是一個(gè)比較復(fù)雜的過程,特別是對于非專業(yè)的人員來說,所以很多新手有網(wǎng)站建設(shè)需求,最先想到的是找本地一家網(wǎng)站建設(shè)公司來承建

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 自動(dòng)化建站優(yōu)化+賣站,看起來是個(gè)好生意

    這幾天在站長論壇看到有人交流自動(dòng)化建站然后SEO優(yōu)化,最后在已3K+左右的價(jià)格賣出??催@確實(shí)讓人熱血沸騰,想馬上開始行動(dòng)起來,其實(shí)我個(gè)人覺得這里面還是有很多難點(diǎn)的。

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 網(wǎng)站建設(shè)過程中容易被忽略的元素是什么?

    網(wǎng)站從建設(shè)到真正運(yùn)營,會(huì)忽略很多元素。其實(shí)一個(gè)網(wǎng)站能否達(dá)到預(yù)期的效果,網(wǎng)站建設(shè)與網(wǎng)站優(yōu)化做好的同時(shí),很關(guān)鍵一點(diǎn),客戶自身的問題。比如我們幫企業(yè)建設(shè)網(wǎng)站,網(wǎng)站提供的主要服務(wù)還是掌握在客戶手上。下面筆者談?wù)劸W(wǎng)站建設(shè)過程中容易被忽略的元素。詳情看下文

    標(biāo)簽:
    網(wǎng)站建設(shè)

熱門排行

信息推薦