當(dāng)我們?yōu)g覽網(wǎng)頁(yè)時(shí)变擒，圖像往往能在視覺(jué)上首先吸引人的注意力娇斑，一個(gè)好的圖片設(shè)計(jì)可以大大美化頁(yè)面材部。和文字相比乐导，網(wǎng)站上圖片傳達(dá)的視覺(jué)印象要強(qiáng)烈得多浸颓。設(shè)計(jì)師們也一直注重對(duì)圖像的創(chuàng)意設(shè)計(jì)产上、網(wǎng)頁(yè)版式設(shè)計(jì)以及色彩搭配，它們是視覺(jué)傳達(dá)的重要手段仪媒。

然而姻僧，圖片再精美撇贺、版式再好冰抢，也招架不住字體的敗筆所帶來(lái)的損失。

在網(wǎng)頁(yè)的構(gòu)成元素中翠订，文字的設(shè)計(jì)與編排是重要元素之一尽超，它們雖然占據(jù)的存儲(chǔ)空間非常小梧躺，但在網(wǎng)頁(yè)上占據(jù)的面積卻是不容忽視的掠哥。對(duì)設(shè)計(jì)師來(lái)說(shuō)，文字除了表達(dá)含義塞琼，還應(yīng)該具有傳遞感情的功能禁舷，這種傳遞就需要通過(guò)字體、字號(hào)以及顏色來(lái)表達(dá)了煞抬。

本文主要介紹字體在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用构哺，下面是AnyForWeb為大家收集的好的字體在網(wǎng)頁(yè)中的使用案例曙强，希望能給大家?guī)?lái)靈感。

1.Ninali的網(wǎng)站使用的字體顯得非常純真活潑溪食，網(wǎng)頁(yè)背景采用信紙樣式的設(shè)計(jì)谱邪，加上文字和圖片的整體搭配榆俺，將可愛(ài)優(yōu)雅的感覺(jué)充分發(fā)揮出來(lái)店归，讓整個(gè)網(wǎng)站的風(fēng)格融合在一起醒叁。

2.Cantina

Valpolicella Negrar網(wǎng)站的文字主要采用了襯線(xiàn)字體把沼，深色背景上的細(xì)長(zhǎng)字體給人優(yōu)雅精致的感覺(jué)吁伺，完美地詮釋了產(chǎn)品特色篮奄。

3.GBR網(wǎng)站這里采用了Metro設(shè)計(jì)風(fēng)格宦搬，圖片里面的logo文字具有設(shè)計(jì)感和線(xiàn)條感，左上角的白色文字醒目矾克，大號(hào)無(wú)襯線(xiàn)字體的文字作為標(biāo)題胁附，小號(hào)的襯線(xiàn)字體作為說(shuō)明，簡(jiǎn)潔干凈州袒。

4.Beg Bicycles網(wǎng)站在不同位置使用了多種字體郎哭，logo菇存、導(dǎo)航依鸥、圖片里的文字等，這些文字并沒(méi)有讓網(wǎng)頁(yè)布局顯得混亂姐扮，反而引導(dǎo)用戶(hù)的視覺(jué)有層次地展現(xiàn)不同板塊的內(nèi)容茶敏，營(yíng)造出清新和淡淡的復(fù)古感蒸播。

5. Meet

Your MX網(wǎng)站字體看起來(lái)很硬朗袍榆，充滿(mǎn)了力量感包雀，和左邊的圖片搭配想結(jié)合，傳遞一種霸氣亲铡，讓網(wǎng)站充滿(mǎn)視覺(jué)沖擊力才写。

6. Trippeo整站都采用了無(wú)襯線(xiàn)字體，這些文字讓整個(gè)網(wǎng)站看起來(lái)干凈利落奖蔓，并且在顯示器上閱讀起來(lái)不費(fèi)力赞草，非常適合不同設(shè)備瀏覽，是近來(lái)科技行業(yè)流行的字體吆鹤。

7.C&C

Coffee Company網(wǎng)站的手寫(xiě)風(fēng)格字體與網(wǎng)頁(yè)里其他元素巧妙呼應(yīng)厨疙，在色彩和布局上展現(xiàn)了高度的統(tǒng)一，網(wǎng)站整體在視覺(jué)上傳達(dá)著手工特色疑务，與產(chǎn)品本身具備的特色保持著一致梗醇。

8.這個(gè)頁(yè)面給你什么感覺(jué)，美麗撒蟀、迷人叙谨、時(shí)尚？M2B網(wǎng)站的圖片正是給用戶(hù)傳達(dá)這樣的感受保屯。不管是導(dǎo)航還是banner圖里面的文字手负，都采用這種美麗的襯線(xiàn)字體，與圖片所表達(dá)內(nèi)容相得益彰姑尺。而簡(jiǎn)潔圓潤(rùn)的logo圖在整個(gè)頁(yè)面中看起來(lái)既醒目虫溜，卻又不顯得突兀。

9.“我們是天然健康的股缸！”怎么將產(chǎn)品的特色展示給用戶(hù)衡楞？在Wonderful網(wǎng)站上，除了選擇合適的圖片和配色敦姻，設(shè)計(jì)精巧的布局瘾境，還通過(guò)文字具有親和力的視覺(jué)效果無(wú)形中給用戶(hù)留下忠實(shí)可靠的印象。

10.Abramsbooks網(wǎng)站整站使用了動(dòng)態(tài)效果镰惦，文字看起來(lái)和整個(gè)頁(yè)面融合在一起迷守，展示卡通風(fēng)格，看起來(lái)非常炫旺入。

從以上案例中兑凿，我們可以看到國(guó)外網(wǎng)站字體的多樣化，其中襯線(xiàn)字體主要展現(xiàn)的感覺(jué)可以概括為精致茵瘾、優(yōu)雅礼华，比較適合大篇文字，主要代表為T(mén)ime New Roman拗秘；而無(wú)襯線(xiàn)字體看起來(lái)干凈簡(jiǎn)潔圣絮，給人自由悠閑的感覺(jué)，很有親和力雕旨，適合作標(biāo)題扮匠，主要代表為Arial。

從谷歌9月份換了新logo就能看出凡涩，這種圓不隆冬的幾何無(wú)襯線(xiàn)字體已經(jīng)成為流行棒搜，最大的優(yōu)勢(shì)在于在電子屏幕上更容易看清。

其實(shí)活箕，設(shè)計(jì)師在選取或設(shè)計(jì)字體時(shí)實(shí)際上還需要考慮一些其他因素：比如是否適合符合網(wǎng)站的整體風(fēng)格力麸，前端技術(shù)人員是否能實(shí)現(xiàn)效果，以及瀏覽器的兼容性，在不同系統(tǒng)展示效果等末盔。

看到這些案例后筑舅，也許會(huì)有設(shè)計(jì)師好奇：為什么國(guó)外網(wǎng)站字體做出來(lái)的效果那么好看，但我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)時(shí)總覺(jué)得無(wú)法達(dá)到那種效果陨舱？

的確翠拣，英文字體設(shè)計(jì)更具多樣化，但國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)的字體并非沒(méi)有發(fā)揮空間游盲，AnyForWeb下一篇文章將和大家分享如何通過(guò)字體給國(guó)內(nèi)網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)新轉(zhuǎn)機(jī)误墓。