當我們?yōu)g覽網(wǎng)頁時，圖像往往能在視覺上首先吸引人的注意力，一個好的圖片設計可以大大美化頁面。和文字相比，網(wǎng)站上圖片傳達的視覺印象要強烈得多。設計師們也一直注重對圖像的創(chuàng)意設計、網(wǎng)頁版式設計以及色彩搭配，它們是視覺傳達的重要手段。

然而，圖片再精美、版式再好，也招架不住字體的敗筆所帶來的損失。

在網(wǎng)頁的構(gòu)成元素中，文字的設計與編排是重要元素之一，它們雖然占據(jù)的存儲空間非常小，但在網(wǎng)頁上占據(jù)的面積卻是不容忽視的。對設計師來說，文字除了表達含義，還應該具有傳遞感情的功能，這種傳遞就需要通過字體、字號以及顏色來表達了。

本文主要介紹字體在網(wǎng)頁設計中的應用，下面是AnyForWeb為大家收集的好的字體在網(wǎng)頁中的使用案例，希望能給大家?guī)盱`感。

1.Ninali的網(wǎng)站使用的字體顯得非常純真活潑，網(wǎng)頁背景采用信紙樣式的設計，加上文字和圖片的整體搭配，將可愛優(yōu)雅的感覺充分發(fā)揮出來，讓整個網(wǎng)站的風格融合在一起。

2.Cantina

Valpolicella Negrar網(wǎng)站的文字主要采用了襯線字體，深色背景上的細長字體給人優(yōu)雅精致的感覺，完美地詮釋了產(chǎn)品特色。

3.GBR網(wǎng)站這里采用了Metro設計風格，圖片里面的logo文字具有設計感和線條感，左上角的白色文字醒目，大號無襯線字體的文字作為標題，小號的襯線字體作為說明，簡潔干凈。

4.Beg Bicycles網(wǎng)站在不同位置使用了多種字體，logo、導航、圖片里的文字等，這些文字并沒有讓網(wǎng)頁布局顯得混亂，反而引導用戶的視覺有層次地展現(xiàn)不同板塊的內(nèi)容，營造出清新和淡淡的復古感。

5. Meet

Your MX網(wǎng)站字體看起來很硬朗，充滿了力量感，和左邊的圖片搭配想結(jié)合，傳遞一種霸氣，讓網(wǎng)站充滿視覺沖擊力。

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

7.C&C

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

8.這個頁面給你什么感覺，美麗、迷人、時尚？M2B網(wǎng)站的圖片正是給用戶傳達這樣的感受。不管是導航還是banner圖里面的文字，都采用這種美麗的襯線字體，與圖片所表達內(nèi)容相得益彰。而簡潔圓潤的logo圖在整個頁面中看起來既醒目，卻又不顯得突兀。

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

10.Abramsbooks網(wǎng)站整站使用了動態(tài)效果，文字看起來和整個頁面融合在一起，展示卡通風格，看起來非常炫。

從以上案例中，我們可以看到國外網(wǎng)站字體的多樣化，其中襯線字體主要展現(xiàn)的感覺可以概括為精致、優(yōu)雅，比較適合大篇文字，主要代表為Time New Roman；而無襯線字體看起來干凈簡潔，給人自由悠閑的感覺，很有親和力，適合作標題，主要代表為Arial。

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

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

看到這些案例后，也許會有設計師好奇：為什么國外網(wǎng)站字體做出來的效果那么好看，但我們在設計網(wǎng)頁時總覺得無法達到那種效果？

的確，英文字體設計更具多樣化，但國內(nèi)網(wǎng)頁設計的字體并非沒有發(fā)揮空間，AnyForWeb下一篇文章將和大家分享如何通過字體給國內(nèi)網(wǎng)頁設計帶來新轉(zhuǎn)機。