当我们浏览网页时，图像往往能在视觉上首先吸引人的注意力，一个好的图片设计可以大大美化页面。和文字相比，网站上图片传达的视觉印象要强烈得多。设计师们也一直注重对图像的创意设计、网页版式设计以及色彩搭配，它们是视觉传达的重要手段。

然而，图片再精美、版式再好，也招架不住字体的败笔所带来的损失。

在网页的构成元素中，文字的设计与编排是重要元素之一，它们虽然占据的存储空间非常小，但在网页上占据的面积却是不容忽视的。对设计师来说，文字除了表达含义，还应该具有传递感情的功能，这种传递就需要通过字体、字号以及颜色来表达了。

本文主要介绍字体在网页设计中的应用，下面是AnyForWeb为大家收集的好的字体在网页中的使用案例，希望能给大家带来灵感。

1.Ninali的网站使用的字体显得非常纯真活泼，网页背景采用信纸样式的设计，加上文字和图片的整体搭配，将可爱优雅的感觉充分发挥出来，让整个网站的风格融合在一起。

网页设计 网页字体设计 网站字体选择 网站策划

2.Cantina Valpolicella Negrar网站的文字主要采用了衬线字体，深色背景上的细长字体给人优雅精致的感觉，完美地诠释了产品特色。

网页设计 网页字体设计 网站字体选择 网站策划

3.GBR网站这里采用了Metro设计风格，图片里面的logo文字具有设计感和线条感，左上角的白色文字醒目，大号无衬线字体的文字作为标题，小号的衬线字体作为说明，简洁干净。

网页设计 网页字体设计 网站字体选择 网站策划

4.Beg Bicycles网站在不同位置使用了多种字体，logo、导航、图片里的文字等，这些文字并没有让网页布局显得混乱，反而引导用户的视觉有层次地展现不同板块的内容，营造出清新和淡淡的复古感。

网页设计 网页字体设计 网站字体选择 网站策划

5. Meet Your MX网站字体看起来很硬朗，充满了力量感，和左边的图片搭配想结合，传递一种霸气，让网站充满视觉冲击力。

网页设计 网页字体设计 网站字体选择 网站策划

6. trippeo整站都采用了无衬线字体，这些文字让整个网站看起来干净利落，并且在显示器上阅读起来不费力，非常适合不同设备浏览，是近来科技行业流行的字体。

网页设计 网页字体设计 网站字体选择 网站策划

7.C&CCoffee Company网站的手写风格字体与网页里其他元素巧妙呼应，在色彩和布局上展现了高度的统一，网站整体在视觉上传达着手工特色，与产品本身具备的特色保持着一致。

网页设计 网页字体设计 网站字体选择 网站策划

8.这个页面给你什么感觉，美丽、迷人、时尚？ M2B网站的图片正是给用户传达这样的感受。不管是导航还是banner图里面的文字，都采用这种美丽的衬线字体，与图片所表达内容相得益彰。而简洁圆润的logo图在整个页面中看起来既醒目，却又不显得突兀。

网页设计 网页字体设计 网站字体选择 网站策划

9.“我们是天然健康的！”怎么将产品的特色展示给用户？在Wonderful网站上，除了选择合适的图片和配色，设计精巧的布局，还通过文字具有亲和力的视觉效果无形中给用户留下忠实可靠的印象。

网页设计 网页字体设计 网站字体选择 网站策划

10.Abramsbooks网站整站使用了动态效果，文字看起来和整个页面融合在一起，展示卡通风格，看起来非常炫。

网页设计 网页字体设计 网站字体选择 网站策划

从以上案例中，我们可以看到国外网站字体的多样化，其中衬线字体主要展现的感觉可以概括为精致、优雅，比较适合大篇文字，主要代表为Time New Roman；而无衬线字体看起来干净简洁，给人自由悠闲的感觉，很有亲和力，适合作标题，主要代表为Arial。

从谷歌9月份换了新logo就能看出，这种圆不隆冬的几何无衬线字体已经成为流行，最大的优势在于在电子屏幕上更容易看清。

网页设计 网页字体设计 网站字体选择 网站策划

其实，设计师在选取或设计字体时实际上还需要考虑一些其他因素：比如是否适合符合网站的整体风格，前端技术人员是否能实现效果，以及浏览器的兼容性，在不同系统展示效果等。

看到这些案例后，也许会有设计师好奇：为什么国外网站字体做出来的效果那么好看，但我们在设计网页时总觉得无法达到那种效果？